@nauverse/tailwind-dot-grid-backgrounds 1.2.14 → 2.0.0

package/README.md

@@ -4,144 +4,154 @@
 </h1>
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/v1/images/header.png" alt="tailwind-dot-grid-backgrounds: dot and grid backgrounds for Tailwind CSS" />
+  <img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/main/images/header.png" alt="tailwind-dot-grid-backgrounds: dot and grid backgrounds for Tailwind CSS" />
 </p>
 
-<h4 align="center">A tiny Tailwind CSS plugin to add dot and grid customizable backgrounds fast</h4>
+<h4 align="center">A tiny Tailwind CSS plugin to add customizable dot and grid backgrounds fast, in pure CSS</h4>
 
 <p align="center">
   <a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/ci.yml">
-    <img src="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/ci.yml/badge.svg?branch=v1" alt="CI status">
+    <img src="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI status">
+  </a>
+  <a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/release.yml">
+    <img src="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/release.yml/badge.svg?branch=main" alt="Release status">
   </a>
   <a href="https://www.npmjs.com/package/@nauverse/tailwind-dot-grid-backgrounds">
-    <img src="https://img.shields.io/npm/v/@nauverse/tailwind-dot-grid-backgrounds/v1.svg?style=flat&label=npm%40v1" alt="npm version">
+    <img src="https://img.shields.io/npm/v/@nauverse/tailwind-dot-grid-backgrounds.svg?style=flat" alt="npm version">
   </a>
-  <a href="https://bundlephobia.com/result?p=@nauverse/tailwind-dot-grid-backgrounds">
-    <img src="https://img.shields.io/bundlephobia/minzip/%40nauverse/tailwind-dot-grid-backgrounds" alt="minzipped size">
+  <a href="https://www.npmjs.com/package/@nauverse/tailwind-dot-grid-backgrounds">
+    <img src="https://img.shields.io/npm/l/@nauverse/tailwind-dot-grid-backgrounds.svg?style=flat" alt="license">
   </a>
 </p>
 
 <p align="center">
-  <a href="#what">What?</a> •
+  <a href="#tldr">tl;dr</a> •
   <a href="#guide-and-examples">Guide and examples</a> •
+  <a href="#migrating-from-v1">Migrating from v1</a> •
   <a href="#help">Help</a> •
   <a href="#contribute">Contribute</a>
 </p>
 
-> [!IMPORTANT]
-> **This is the `v1` line of the plugin, for Tailwind CSS v3.**
->
-> Using **Tailwind CSS v4**? Use the latest version instead (`v2` and later). It is a pure CSS plugin with no JavaScript, loaded with `@import "@nauverse/tailwind-dot-grid-backgrounds";`. See the [main branch README](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds#readme) for its guide and the migration steps.
-
 | Plugin version | Tailwind CSS | How it works | Branch |
 | -------------- | ------------ | ------------ | ------ |
 | `2.x` (latest) | `^4.0`       | Pure CSS (`@utility`), no JavaScript | [`main`](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/main) |
-| `1.x`          | `^3.4`       | JavaScript plugin (Node.js `>=22`) | [`v1`](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/v1) (maintenance) |
+| `1.x`          | `^3.4`       | JavaScript plugin | [`v1`](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/v1) (maintenance, [docs](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/v1#readme)) |
+
+Still on Tailwind CSS v3? Install the `v1` line: `npm install --save-dev @nauverse/tailwind-dot-grid-backgrounds@1`.
 
 ## tl;dr
-This is a Tailwind CSS v3 plugin that allows you to add background grids and background dots in an easy and customizable way.
+This is a Tailwind CSS v4 plugin that allows you to add background grids and background dots in an easy and customizable way.
 
 ### 1. Install the dependency
 ```bash
-npm install --save-dev @nauverse/tailwind-dot-grid-backgrounds@1
+npm install --save-dev @nauverse/tailwind-dot-grid-backgrounds
 ```
 
-### 2. Add the plugin to your Tailwind CSS config
-`tailwind.config.ts` / `tailwind.config.mjs`:
-```ts
-import dotGridBackgrounds from "@nauverse/tailwind-dot-grid-backgrounds";
-import type { Config } from "tailwindcss";
-
-export default {
-  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
-  plugins: [
-    dotGridBackgrounds,
-    // ... the rest of your Tailwind CSS plugins
-  ],
-} satisfies Config;
-```
-
-Or, with a CommonJS `tailwind.config.js`:
-```js
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
-  plugins: [
-    require("@nauverse/tailwind-dot-grid-backgrounds"),
-    // ... the rest of your Tailwind CSS plugins
-  ],
-};
+### 2. Import it in your CSS, after Tailwind CSS
+```css
+@import "tailwindcss";
+@import "@nauverse/tailwind-dot-grid-backgrounds";
 ```
 
 ### 3. You are done!
 Try it by adding this HTML to your UI:
 ```html
-<div class="h-screen w-screen bg-yellow-300 bg-grid-8-s-2-neutral-950"></div>
+<div class="h-screen w-screen bg-yellow-300 bg-grid-neutral-950 bg-grid-size-8 bg-grid-stroke-2"></div>
 ```
 
 ## What
 You could achieve the same by just using some Tailwind CSS code but... I found myself adding this kind of background in my projects very often. So I created a small Tailwind CSS plugin to allow me adding these backgrounds while keeping all the customization offered by Tailwind CSS.
 
 ### Features
-- Fully integrated with Tailwind CSS: it uses your theme colors, widths and border widths
-- Performant: the backgrounds are rendered with CSS gradients, no images
+- Fully integrated with Tailwind CSS: theme colors, opacity modifiers, the spacing scale, arbitrary values and every variant (`hover:`, `md:`, `dark:`...)
+- Pure CSS: just an `@import`, no JavaScript and no configuration
+- Performant: the backgrounds are CSS gradients, and only the classes you use are generated
 - Zero dependencies
-- Tested
-- Easy to use, straight to the point
+- Tested against the latest and the oldest supported Tailwind CSS v4 releases
 
 ## Guide and examples
 
-### Background Grid
-Pattern: `bg-grid-<SIZE>-s-<STROKE_WIDTH>-<COLOR>`
+A pattern is drawn by its color class. Its size and line (or dot) width are optional classes that you can combine with it, so each part can change on its own with variants (for example `md:bg-grid-size-12`).
+
+### Background grid
 
-- `<SIZE>` is the size of the grid squares. It accepts the keys of the `width` theme whose value is in `px` or `rem` (such as `8`, `0.5`, `px`...). You will see the available options in IntelliSense.
-- `<STROKE_WIDTH>` is the width of the strokes of the grid squares. It accepts the keys of the `borderWidth` theme whose value is in `px` or `rem` (such as `0`, `2`, `4`, `8`), plus `1` (since Tailwind CSS does not have a `border-1` class).
-- `<COLOR>` is the color of the strokes. It accepts any color of your theme, an opacity modifier (`/50`) and arbitrary values (`[#ff0000]`).
+| Class | What it sets | Default |
+| ----- | ------------ | ------- |
+| `bg-grid-<color>` | Draws the grid with this line color | - |
+| `bg-grid-size-<number>` | The size of the squares, in spacing units (like `w-<number>`) | `8` (`2rem`) |
+| `bg-grid-stroke-<number>` | The width of the lines, in pixels | `1` (`1px`) |
+
+- `<color>` accepts any theme color (`neutral-950`, your own `--color-*` variables) with an optional opacity modifier (`bg-grid-blue-700/80`, `bg-grid-blue-700/[35%]`), arbitrary values (`bg-grid-[#ff0000]`), CSS variables (`bg-grid-(--my-color)`) and `current` (`bg-grid-current` has no opacity modifier: use `bg-grid-[color-mix(in_oklab,currentcolor_50%,transparent)]` instead).
+- `bg-grid-size-*` also accepts `--spacing-*` theme keys (`bg-grid-size-cell` with `--spacing-cell: 18px`), arbitrary lengths (`bg-grid-size-[18px]`) and CSS variables (`bg-grid-size-(--cell)`).
+- `bg-grid-stroke-*` also accepts decimals (`bg-grid-stroke-0.5`), arbitrary lengths (`bg-grid-stroke-[0.1rem]`) and CSS variables (`bg-grid-stroke-(--line)`).
+- Arbitrary values are not validated, like in Tailwind CSS itself: `bg-grid-[10px]` generates a class that draws nothing.
 
 #### Examples:
-`bg-grid-8-s-2-neutral-950`
+`bg-grid-neutral-950 bg-grid-size-8 bg-grid-stroke-2`
 <p align="center">
-  <img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-grid-8-s-2-neutral-950.png" alt="tailwind-dot-grid-backgrounds bg-grid-8-s-2-neutral-950" />
+  <img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-grid-8-s-2-neutral-950.png" alt="bg-grid-neutral-950 bg-grid-size-8 bg-grid-stroke-2" />
 </p>
 
-`bg-grid-48-s-8-blue-700/80`
+`bg-grid-blue-700/80 bg-grid-size-48 bg-grid-stroke-8`
 <p align="center">
-  <img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-grid-48-s-8-blue-700_80.png" alt="tailwind-dot-grid-backgrounds bg-grid-48-s-8-blue-700/80" />
+  <img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-grid-48-s-8-blue-700_80.png" alt="bg-grid-blue-700/80 bg-grid-size-48 bg-grid-stroke-8" />
 </p>
 
-### Background Dots
-Pattern: `bg-dot-<SIZE>-s-<DOT_SIZE>-<COLOR>`
+### Background dots
+
+| Class | What it sets | Default |
+| ----- | ------------ | ------- |
+| `bg-dot-<color>` | Draws the dots with this color | - |
+| `bg-dot-size-<number>` | The distance between the dots (in both axes), in spacing units | `8` (`2rem`) |
+| `bg-dot-radius-<number>` | The radius of the dots, in pixels | `1` (`1px`) |
 
-- `<SIZE>` is the size of the space (in both axes) between the dots. It accepts the keys of the `width` theme whose value is in `px` or `rem`. You will see the available options in IntelliSense.
-- `<DOT_SIZE>` is the radius of the dots. It accepts the keys of the `borderWidth` theme whose value is in `px` or `rem`, plus `1`.
-- `<COLOR>` is the color of the dots. It accepts any color of your theme, an opacity modifier (`/50`) and arbitrary values (`[#ff0000]`).
+They accept the same values as their grid counterparts.
 
 #### Examples:
-`bg-dot-8-s-2-neutral-950`
+`bg-dot-neutral-950 bg-dot-size-8 bg-dot-radius-2`
 <p align="center">
-  <img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-dot-8-s-2-neutral-950.png" alt="tailwind-dot-grid-backgrounds bg-dot-8-s-2-neutral-950" />
+  <img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-dot-8-s-2-neutral-950.png" alt="bg-dot-neutral-950 bg-dot-size-8 bg-dot-radius-2" />
 </p>
 
-`bg-dot-16-s-8-blue-700/80`
+`bg-dot-blue-700/80 bg-dot-size-16 bg-dot-radius-8`
 <p align="center">
-  <img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-dot-16-s-8-blue-700_80.png" alt="tailwind-dot-grid-backgrounds bg-dot-16-s-8-blue-700/80" />
+  <img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-dot-16-s-8-blue-700_80.png" alt="bg-dot-blue-700/80 bg-dot-size-16 bg-dot-radius-8" />
 </p>
 
 ### Customizing
-The plugin reads your theme, so extending it adds new classes:
-
-```ts
-export default {
-  theme: {
-    extend: {
-      colors: { brand: { DEFAULT: "#123456", soft: "#abcdef" } }, // bg-grid-8-s-1-brand, bg-dot-8-s-1-brand-soft
-      width: { cell: "18px" }, // bg-grid-cell-s-1-red-500
-      borderWidth: { thick: "3px" }, // bg-grid-8-s-thick-red-500
-    },
-  },
-} satisfies Config;
+Everything comes from your Tailwind CSS theme:
+
+```css
+@import "tailwindcss";
+@import "@nauverse/tailwind-dot-grid-backgrounds";
+
+@theme {
+  --color-brand: #123456; /* bg-grid-brand, bg-dot-brand/50 */
+  --spacing-cell: 18px; /* bg-grid-size-cell */
+}
 ```
 
+The pattern settings are stored in the `--bg-grid-color`, `--bg-grid-size`, `--bg-grid-stroke`, `--bg-dot-color`, `--bg-dot-size` and `--bg-dot-radius` CSS variables. They are registered with `@property` as non-inherited, so a pattern never leaks into the patterns of its children.
+
+## Migrating from v1
+
+Version 2 is for Tailwind CSS v4. It is a pure CSS plugin, and each part of a pattern is now its own class.
+
+1. Upgrade to Tailwind CSS v4 ([upgrade guide](https://tailwindcss.com/docs/upgrade-guide)).
+2. Install the latest version: `npm install --save-dev @nauverse/tailwind-dot-grid-backgrounds@latest`.
+3. Remove the plugin from your `tailwind.config.*` `plugins` (or the `@plugin` directive) and add `@import "@nauverse/tailwind-dot-grid-backgrounds";` after `@import "tailwindcss";`.
+4. Replace the classes. `<SIZE>`, `<STROKE_WIDTH>`/`<DOT_SIZE>` and `<COLOR>` keep the same values:
+
+| v1 | v2 |
+| -- | -- |
+| `bg-grid-<SIZE>-s-<STROKE_WIDTH>-<COLOR>` | `bg-grid-<COLOR> bg-grid-size-<SIZE> bg-grid-stroke-<STROKE_WIDTH>` |
+| `bg-dot-<SIZE>-s-<DOT_SIZE>-<COLOR>` | `bg-dot-<COLOR> bg-dot-size-<SIZE> bg-dot-radius-<DOT_SIZE>` |
+| `bg-grid-8-s-2-neutral-950` | `bg-grid-neutral-950 bg-grid-size-8 bg-grid-stroke-2` |
+| `bg-dot-16-s-8-blue-700/80` | `bg-dot-blue-700/80 bg-dot-size-16 bg-dot-radius-8` |
+| `bg-grid-px-s-1-red-500` | `bg-grid-red-500 bg-grid-size-[1px]` |
+
+Sizes now follow your spacing scale (`--spacing`) instead of being converted to pixels, and the stroke width and dot radius default to `1px`, so `bg-grid-<COLOR> bg-grid-size-<SIZE>` is enough for 1px lines.
+
 ## Help
 
 Thank you for using *tailwind-dot-grid-backgrounds*!
@@ -150,7 +160,7 @@ If you need any help using this plugin, feel free to [create a GitHub issue](htt
 
 ## Contribute
 
-Contributions of any kind (pull requests, bug reports, feature requests, documentation, design) are more than welcome! Read the [contributing guide](./CONTRIBUTING.md) to get started. Fixes for the Tailwind CSS v3 line go to the `v1` branch.
+Contributions of any kind (pull requests, bug reports, feature requests, documentation, design) are more than welcome! Read the [contributing guide](./CONTRIBUTING.md) to get started (and [AGENTS.md](./AGENTS.md) if you use a coding agent).
 
 ## Contributors
 

package/index.css

@@ -0,0 +1,99 @@
+/*
+ * @nauverse/tailwind-dot-grid-backgrounds
+ * Dot and grid backgrounds for Tailwind CSS v4, as pure CSS utilities.
+ *
+ * Grid: bg-grid-<color>[/<opacity>] bg-grid-size-<spacing> bg-grid-stroke-<px>
+ * Dots: bg-dot-<color>[/<opacity>]  bg-dot-size-<spacing>  bg-dot-radius-<px>
+ */
+
+/*
+ * The pattern settings must not inherit: a nested element would otherwise reuse the size, stroke or color of its parent pattern.
+ * Without a value, each utility falls back to its default (1px lines or dots, every 8 spacing units).
+ */
+@property --bg-grid-color {
+	syntax: "*";
+	inherits: false;
+}
+
+@property --bg-grid-size {
+	syntax: "*";
+	inherits: false;
+}
+
+@property --bg-grid-stroke {
+	syntax: "*";
+	inherits: false;
+}
+
+@property --bg-dot-color {
+	syntax: "*";
+	inherits: false;
+}
+
+@property --bg-dot-size {
+	syntax: "*";
+	inherits: false;
+}
+
+@property --bg-dot-radius {
+	syntax: "*";
+	inherits: false;
+}
+
+/* ---------------------------------- Grid ---------------------------------- */
+
+/* The color of the grid lines (theme color, arbitrary value or CSS variable, with an optional opacity modifier). It also draws the grid. */
+@utility bg-grid-* {
+	--bg-grid-color: --value(--color-*, [color], [*]);
+	--bg-grid-color: --alpha(--value(--color-*, [color], [*]) / calc(--modifier(number) * 1%));
+	--bg-grid-color: --alpha(--value(--color-*, [color], [*]) / --modifier([percentage]));
+	background-image: linear-gradient(to right, var(--bg-grid-color) var(--bg-grid-stroke, 1px), transparent var(--bg-grid-stroke, 1px)), linear-gradient(to bottom, var(--bg-grid-color) var(--bg-grid-stroke, 1px), transparent var(--bg-grid-stroke, 1px));
+	background-size: var(--bg-grid-size, --spacing(8)) var(--bg-grid-size, --spacing(8));
+}
+
+@utility bg-grid-current {
+	--bg-grid-color: currentcolor;
+	background-image: linear-gradient(to right, var(--bg-grid-color) var(--bg-grid-stroke, 1px), transparent var(--bg-grid-stroke, 1px)), linear-gradient(to bottom, var(--bg-grid-color) var(--bg-grid-stroke, 1px), transparent var(--bg-grid-stroke, 1px));
+	background-size: var(--bg-grid-size, --spacing(8)) var(--bg-grid-size, --spacing(8));
+}
+
+/* The size of the grid squares: a multiple of the spacing scale, a spacing theme key or an arbitrary length. */
+@utility bg-grid-size-* {
+	--bg-grid-size: --spacing(--value(number));
+	--bg-grid-size: --value(--spacing-*, [length], [*]);
+}
+
+/* The width of the grid lines: a number of pixels or an arbitrary length. */
+@utility bg-grid-stroke-* {
+	--bg-grid-stroke: --value(number)px;
+	--bg-grid-stroke: --value([length], [*]);
+}
+
+/* ---------------------------------- Dots ---------------------------------- */
+
+/* The color of the dots (theme color, arbitrary value or CSS variable, with an optional opacity modifier). It also draws the dots. */
+@utility bg-dot-* {
+	--bg-dot-color: --value(--color-*, [color], [*]);
+	--bg-dot-color: --alpha(--value(--color-*, [color], [*]) / calc(--modifier(number) * 1%));
+	--bg-dot-color: --alpha(--value(--color-*, [color], [*]) / --modifier([percentage]));
+	background-image: radial-gradient(var(--bg-dot-color) var(--bg-dot-radius, 1px), transparent var(--bg-dot-radius, 1px));
+	background-size: var(--bg-dot-size, --spacing(8)) var(--bg-dot-size, --spacing(8));
+}
+
+@utility bg-dot-current {
+	--bg-dot-color: currentcolor;
+	background-image: radial-gradient(var(--bg-dot-color) var(--bg-dot-radius, 1px), transparent var(--bg-dot-radius, 1px));
+	background-size: var(--bg-dot-size, --spacing(8)) var(--bg-dot-size, --spacing(8));
+}
+
+/* The distance between the dots (in both axes): a multiple of the spacing scale, a spacing theme key or an arbitrary length. */
+@utility bg-dot-size-* {
+	--bg-dot-size: --spacing(--value(number));
+	--bg-dot-size: --value(--spacing-*, [length], [*]);
+}
+
+/* The radius of the dots: a number of pixels or an arbitrary length. */
+@utility bg-dot-radius-* {
+	--bg-dot-radius: --value(number)px;
+	--bg-dot-radius: --value([length], [*]);
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nauverse/tailwind-dot-grid-backgrounds",
-  "description": "🎨 A tiny Tailwind plugin to add dot and grid customizable backgrounds fast",
+  "description": "A tiny Tailwind CSS v4 plugin to add customizable dot and grid backgrounds fast, in pure CSS",
   "author": {
     "name": "Albert Adler | @IAmAlbertAdler",
     "url": "https://albertadler.com"
   },
   "license": "MIT",
-  "homepage": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/v1#readme",
+  "homepage": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds#readme",
   "repository": {
     "type": "git",
     "url": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds.git"
@@ -17,44 +17,37 @@
   "keywords": [
     "tailwind",
     "tailwindcss",
+    "tailwindcss-v4",
     "tailwindcss-plugin",
-    "tailwindcss-grid-background",
-    "tailwindcss-dot-background",
+    "css",
     "grid-background",
-    "dot-background"
+    "dot-background",
+    "background-pattern"
   ],
-  "version": "1.2.14",
+  "version": "2.0.0",
   "type": "module",
-  "main": "./dist/tailwind-dot-grid-backgrounds.umd.cjs",
-  "module": "./dist/tailwind-dot-grid-backgrounds.js",
-  "types": "./dist/index.d.ts",
-  "engines": {
-    "node": ">=22.0.0"
-  },
+  "style": "./index.css",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/tailwind-dot-grid-backgrounds.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/tailwind-dot-grid-backgrounds.umd.cjs"
-      }
-    }
+      "style": "./index.css",
+      "default": "./index.css"
+    },
+    "./index.css": "./index.css",
+    "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "index.css"
+  ],
+  "sideEffects": [
+    "*.css"
   ],
   "scripts": {
-    "build": "tsc --noEmit && vite build && tsc -p tsconfig.build.json",
     "test": "vitest",
     "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
     "lint": "biome check",
     "lint:fix": "biome check --write",
-    "prepare": "husky",
-    "typecheck": "tsc --noEmit"
+    "prepare": "husky"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.14",
@@ -62,20 +55,17 @@
     "@commitlint/config-conventional": "21.2.3",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
+    "@tailwindcss/node": "4.3.3",
     "@types/node": "24.19.0",
-    "@vitest/coverage-v8": "5.0.2",
     "husky": "9.1.7",
-    "postcss": "8.5.28",
     "semantic-release": "25.0.9",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "4.3.3",
     "typescript": "7.0.2",
-    "vite": "8.3.1",
     "vitest": "5.0.2"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^4.0.0"
   },
-  "sideEffects": false,
   "devEngines": {
     "runtime": {
       "name": "node",

package/dist/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./plugin.js";

package/dist/plugin.d.ts

@@ -1,5 +0,0 @@
-declare const tailwindDotGridBackgrounds: {
-    handler: import("tailwindcss/types/config.js").PluginCreator;
-    config?: Partial<import("tailwindcss/types/config.js").Config>;
-};
-export default tailwindDotGridBackgrounds;

package/dist/tailwind-dot-grid-backgrounds.js

@@ -1,57 +0,0 @@
-import e from "tailwindcss/plugin.js";
-//#region src/theme-values.ts
-var t = 16, n = /* @__PURE__ */ new Set(["inherit"]);
-function r(e) {
-	if (typeof e != "string") return null;
-	let n = /^(-?\d*\.?\d+)(px|rem)$/.exec(e.trim());
-	if (!n) return null;
-	let r = Number.parseFloat(n[1]);
-	return n[2] === "rem" ? r * t : r;
-}
-function i(e) {
-	return Object.entries(e ?? {}).flatMap(([e, t]) => {
-		let n = r(t);
-		return n === null ? [] : [[e, n]];
-	});
-}
-function a(e, t) {
-	return Object.entries(e).flatMap(([e, r]) => {
-		let i = e === "DEFAULT" ? t : t ? `${t}-${e}` : e;
-		return typeof r == "object" && r ? a(r, i) : n.has(i) ? [] : [[i, r]];
-	});
-}
-function o(e) {
-	return Object.fromEntries(a(e ?? {}, ""));
-}
-function s(e) {
-	let t = i(e).filter(([e]) => e !== "DEFAULT");
-	return t.some(([e]) => e === "1") ? t : [["1", 1], ...t];
-}
-//#endregion
-//#region src/plugin.ts
-function c(e, t) {
-	return (n) => ({
-		backgroundImage: `linear-gradient(to right, ${n} ${t}px, transparent ${t}px),linear-gradient(to bottom, ${n} ${t}px, transparent ${t}px)`,
-		backgroundSize: `${e}px ${e}px`
-	});
-}
-function l(e, t) {
-	return (n) => ({
-		backgroundImage: `radial-gradient(${n} ${t}px, transparent ${t}px)`,
-		backgroundSize: `${e}px ${e}px`
-	});
-}
-var u = e(({ matchUtilities: e, theme: t }) => {
-	let n = o(t("backgroundColor")), r = s(t("borderWidth")), a = i(t("width")), u = n;
-	for (let [t, n] of r) for (let [r, i] of a) e({
-		[`bg-grid-${r}-s-${t}`]: c(i, n),
-		[`bg-dot-${r}-s-${t}`]: l(i, n)
-	}, {
-		values: u,
-		type: "color"
-	});
-});
-//#endregion
-export { u as default };
-
-//# sourceMappingURL=tailwind-dot-grid-backgrounds.js.map

package/dist/tailwind-dot-grid-backgrounds.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tailwind-dot-grid-backgrounds.js","names":["plugin","REM_TO_PX","UNSUPPORTED_COLORS","toPx","value","match","amount","toPxEntries","section","key","px","colorEntries","palette","name","prefix","flattenColors","strokeWidths","entries","borderWidth","gridBackground","color","stroke","size","dotBackground","dotSize","tailwindDotGridBackgrounds","colors","theme","strokes","sizes","values","strokeKey","sizeKey"],"sources":["../src/theme-values.ts","../src/plugin.ts"],"sourcesContent":["const REM_TO_PX = 16; // 1rem = 16px\n\n// Colors that cannot be used inside a gradient color stop.\nconst UNSUPPORTED_COLORS = new Set([\"inherit\"]);\n\ntype ColorValue = string | ((...args: never[]) => string);\ntype ColorPalette = { [key: string]: ColorValue | ColorPalette };\n\n// Convert a \"px\" or \"rem\" length to a number of pixels. Other values (percentages, keywords, other units...) return null.\nexport function toPx(value: unknown): number | null {\n\tif (typeof value !== \"string\") return null;\n\n\tconst match = /^(-?\\d*\\.?\\d+)(px|rem)$/.exec(value.trim());\n\tif (!match) return null;\n\n\tconst amount = Number.parseFloat(match[1] as string);\n\treturn match[2] === \"rem\" ? amount * REM_TO_PX : amount;\n}\n\n// Turn a theme section into [key, px] pairs, keeping only the values expressed in \"px\" or \"rem\".\nexport function toPxEntries(\n\tsection: Record<string, unknown> | undefined,\n): Array<[string, number]> {\n\treturn Object.entries(section ?? {}).flatMap(([key, value]) => {\n\t\tconst px = toPx(value);\n\t\treturn px === null ? [] : [[key, px] as [string, number]];\n\t});\n}\n\n// Flatten a nested color palette into [name, color] pairs (\"DEFAULT\" maps to the parent name), like Tailwind does.\nfunction colorEntries(\n\tpalette: ColorPalette,\n\tprefix: string,\n): Array<[string, ColorValue]> {\n\treturn Object.entries(palette).flatMap(([key, value]) => {\n\t\tconst name = key === \"DEFAULT\" ? prefix : prefix ? `${prefix}-${key}` : key;\n\n\t\tif (typeof value === \"object\" && value !== null) {\n\t\t\treturn colorEntries(value, name);\n\t\t}\n\n\t\treturn UNSUPPORTED_COLORS.has(name)\n\t\t\t? []\n\t\t\t: [[name, value] as [string, ColorValue]];\n\t});\n}\n\nexport function flattenColors(\n\tpalette: ColorPalette | undefined,\n): Record<string, ColorValue> {\n\treturn Object.fromEntries(colorEntries(palette ?? {}, \"\"));\n}\n\n// The stroke widths: every border width expressed in px or rem, except \"DEFAULT\" (it would create \"-s-DEFAULT-\" classes). \"1\" is always available since Tailwind has no \"border-1\".\nexport function strokeWidths(\n\tborderWidth: Record<string, unknown> | undefined,\n): Array<[string, number]> {\n\tconst entries = toPxEntries(borderWidth).filter(([key]) => key !== \"DEFAULT\");\n\treturn entries.some(([key]) => key === \"1\")\n\t\t? entries\n\t\t: [[\"1\", 1], ...entries];\n}\n","// The \".js\" extension is required: Tailwind CSS v3 has no \"exports\" map, so Node ESM needs the full file name.\nimport plugin from \"tailwindcss/plugin.js\";\nimport type { CSSRuleObject, PluginAPI } from \"tailwindcss/types/config.js\";\nimport { flattenColors, strokeWidths, toPxEntries } from \"./theme-values.js\";\n\ntype UtilityFactory = (color: string) => CSSRuleObject;\n\nfunction gridBackground(size: number, stroke: number): UtilityFactory {\n\treturn (color) => ({\n\t\tbackgroundImage: `linear-gradient(to right, ${color} ${stroke}px, transparent ${stroke}px),linear-gradient(to bottom, ${color} ${stroke}px, transparent ${stroke}px)`,\n\t\tbackgroundSize: `${size}px ${size}px`,\n\t});\n}\n\nfunction dotBackground(size: number, dotSize: number): UtilityFactory {\n\treturn (color) => ({\n\t\tbackgroundImage: `radial-gradient(${color} ${dotSize}px, transparent ${dotSize}px)`,\n\t\tbackgroundSize: `${size}px ${size}px`,\n\t});\n}\n\nconst tailwindDotGridBackgrounds = plugin(\n\t({ matchUtilities, theme }: PluginAPI) => {\n\t\t// Colors come from the \"backgroundColor\" theme (it includes \"colors\").\n\t\tconst colors = flattenColors(theme(\"backgroundColor\"));\n\n\t\t// Stroke widths (grid) and dot sizes come from the \"borderWidth\" theme, plus \"1\".\n\t\tconst strokes = strokeWidths(theme(\"borderWidth\"));\n\n\t\t// Grid square sizes and dot spacings come from the \"width\" theme values expressed in px or rem.\n\t\tconst sizes = toPxEntries(theme(\"width\"));\n\n\t\t// Tailwind types color values as strings, but a palette may also contain functions: both are handled by matchUtilities.\n\t\tconst values = colors as Record<string, string>;\n\n\t\tfor (const [strokeKey, stroke] of strokes) {\n\t\t\tfor (const [sizeKey, size] of sizes) {\n\t\t\t\tmatchUtilities(\n\t\t\t\t\t{\n\t\t\t\t\t\t[`bg-grid-${sizeKey}-s-${strokeKey}`]: gridBackground(size, stroke),\n\t\t\t\t\t\t[`bg-dot-${sizeKey}-s-${strokeKey}`]: dotBackground(size, stroke),\n\t\t\t\t\t},\n\t\t\t\t\t{ values, type: \"color\" },\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t},\n);\n\nexport default tailwindDotGridBackgrounds;\n"],"mappings":";;AAAA,IAAMC,IAAY,IAGZC,oBAAqB,IAAI,IAAI,CAAC,SAAS,CAAC;AAM9C,SAAgBC,EAAK,GAA+B;CACnD,IAAI,OAAOC,KAAU,UAAU,OAAO;CAEtC,IAAMC,IAAQ,0BAA0B,KAAKD,EAAM,KAAK,CAAC;CACzD,IAAI,CAACC,GAAO,OAAO;CAEnB,IAAMC,IAAS,OAAO,WAAWD,EAAM,EAAY;CACnD,OAAOA,EAAM,OAAO,QAAQC,IAASL,IAAYK;AAClD;AAGA,SAAgBC,EACf,GAC0B;CAC1B,OAAO,OAAO,QAAQC,KAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAACC,GAAKL,OAAW;EAC9D,IAAMM,IAAKP,EAAKC,CAAK;EACrB,OAAOM,MAAO,OAAO,CAAC,IAAI,CAAC,CAACD,GAAKC,CAAE,CAAqB;CACzD,CAAC;AACF;AAGA,SAASC,EACR,GACA,GAC8B;CAC9B,OAAO,OAAO,QAAQC,CAAO,CAAC,CAAC,SAAS,CAACH,GAAKL,OAAW;EACxD,IAAMS,IAAOJ,MAAQ,YAAYK,IAASA,IAAS,GAAGA,EAAO,GAAGL,MAAQA;EAMxE,OAJI,OAAOL,KAAU,YAAYA,IACzBO,EAAaP,GAAOS,CAAI,IAGzBX,EAAmB,IAAIW,CAAI,IAC/B,CAAC,IACD,CAAC,CAACA,GAAMT,CAAK,CAAyB;CAC1C,CAAC;AACF;AAEA,SAAgBW,EACf,GAC6B;CAC7B,OAAO,OAAO,YAAYJ,EAAaC,KAAW,CAAC,GAAG,EAAE,CAAC;AAC1D;AAGA,SAAgBI,EACf,GAC0B;CAC1B,IAAMC,IAAUV,EAAYW,CAAW,CAAC,CAAC,QAAQ,CAACT,OAASA,MAAQ,SAAS;CAC5E,OAAOQ,EAAQ,MAAM,CAACR,OAASA,MAAQ,GAAG,IACvCQ,IACA,CAAC,CAAC,KAAK,CAAC,GAAG,GAAGA,CAAO;AACzB;;;ACtDA,SAASE,EAAe,GAAc,GAAgC;CACrE,QAAQ,OAAW;EAClB,iBAAiB,6BAA6BC,EAAM,GAAGC,EAAO,kBAAkBA,EAAO,iCAAiCD,EAAM,GAAGC,EAAO,kBAAkBA,EAAO;EACjK,gBAAgB,GAAGC,EAAK,KAAKA,EAAK;CACnC;AACD;AAEA,SAASC,EAAc,GAAc,GAAiC;CACrE,QAAQ,OAAW;EAClB,iBAAiB,mBAAmBH,EAAM,GAAGI,EAAQ,kBAAkBA,EAAQ;EAC/E,gBAAgB,GAAGF,EAAK,KAAKA,EAAK;CACnC;AACD;AAEA,IAAMG,IAA6BzB,GACjC,EAAE,mBAAgB,eAAuB;CAEzC,IAAM0B,IAASX,EAAcY,EAAM,iBAAiB,CAAC,GAG/CC,IAAUZ,EAAaW,EAAM,aAAa,CAAC,GAG3CE,IAAQtB,EAAYoB,EAAM,OAAO,CAAC,GAGlCG,IAASJ;CAEf,KAAK,IAAM,CAACK,GAAWV,MAAWO,GACjC,KAAK,IAAM,CAACI,GAASV,MAASO,GAC7B,EACC;GACE,WAAWG,EAAQ,KAAKD,MAAcZ,EAAeG,GAAMD,CAAM;GACjE,UAAUW,EAAQ,KAAKD,MAAcR,EAAcD,GAAMD,CAAM;CACjE,GACA;EAAE;EAAQ,MAAM;CAAQ,CACzB;AAGH,CACD"}

package/dist/tailwind-dot-grid-backgrounds.umd.cjs

@@ -1,2 +0,0 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?module.exports=t(require("tailwindcss/plugin.js")):typeof define==`function`&&define.amd?define([`tailwindcss/plugin.js`],t):(e=typeof globalThis<`u`?globalThis:e||self,e.tailwindDotGridBackgrounds=t(e.tailwindcss.plugin))})(this,function(e){var t=Object.create,n=Object.defineProperty,r=Object.getOwnPropertyDescriptor,i=Object.getOwnPropertyNames,a=Object.getPrototypeOf,o=Object.prototype.hasOwnProperty,s=(e,t,a,s)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=i(t),l=0,u=c.length,d;l<u;l++)d=c[l],!o.call(e,d)&&d!==a&&n(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(s=r(t,d))||s.enumerable});return e};e=((e,r,i)=>(i=e==null?{}:t(a(e)),s(r||!e||!e.__esModule||!o.call(e,`default`)?n(i,`default`,{value:e,enumerable:!0}):i,e)))(e,1);var c=16,l=new Set([`inherit`]);function u(e){if(typeof e!=`string`)return null;let t=/^(-?\d*\.?\d+)(px|rem)$/.exec(e.trim());if(!t)return null;let n=Number.parseFloat(t[1]);return t[2]===`rem`?n*c:n}function d(e){return Object.entries(e??{}).flatMap(([e,t])=>{let n=u(t);return n===null?[]:[[e,n]]})}function f(e,t){return Object.entries(e).flatMap(([e,n])=>{let r=e===`DEFAULT`?t:t?`${t}-${e}`:e;return typeof n==`object`&&n?f(n,r):l.has(r)?[]:[[r,n]]})}function p(e){return Object.fromEntries(f(e??{},``))}function m(e){let t=d(e).filter(([e])=>e!==`DEFAULT`);return t.some(([e])=>e===`1`)?t:[[`1`,1],...t]}function h(e,t){return n=>({backgroundImage:`linear-gradient(to right, ${n} ${t}px, transparent ${t}px),linear-gradient(to bottom, ${n} ${t}px, transparent ${t}px)`,backgroundSize:`${e}px ${e}px`})}function g(e,t){return n=>({backgroundImage:`radial-gradient(${n} ${t}px, transparent ${t}px)`,backgroundSize:`${e}px ${e}px`})}return(0,e.default)(({matchUtilities:e,theme:t})=>{let n=p(t(`backgroundColor`)),r=m(t(`borderWidth`)),i=d(t(`width`)),a=n;for(let[t,n]of r)for(let[r,o]of i)e({[`bg-grid-${r}-s-${t}`]:h(o,n),[`bg-dot-${r}-s-${t}`]:g(o,n)},{values:a,type:`color`})})});
-//# sourceMappingURL=tailwind-dot-grid-backgrounds.umd.cjs.map

package/dist/tailwind-dot-grid-backgrounds.umd.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"tailwind-dot-grid-backgrounds.umd.cjs","names":["plugin","factory","global","__create","__defProp","__getOwnPropDesc","__getOwnPropNames","__getProtoOf","__hasOwnProp","__copyProps","from","keys","i","n","key","to","except","k","desc","mod","isNodeMode","target","tailwindcss_plugin_js","REM_TO_PX","UNSUPPORTED_COLORS","toPx","value","match","amount","toPxEntries","section","px","colorEntries","palette","name","prefix","flattenColors","strokeWidths","entries","borderWidth","gridBackground","color","stroke","size","dotBackground","dotSize","colors","theme","strokes","sizes","values","strokeKey","sizeKey","matchUtilities"],"sources":["../src/theme-values.ts","../src/plugin.ts"],"sourcesContent":["const REM_TO_PX = 16; // 1rem = 16px\n\n// Colors that cannot be used inside a gradient color stop.\nconst UNSUPPORTED_COLORS = new Set([\"inherit\"]);\n\ntype ColorValue = string | ((...args: never[]) => string);\ntype ColorPalette = { [key: string]: ColorValue | ColorPalette };\n\n// Convert a \"px\" or \"rem\" length to a number of pixels. Other values (percentages, keywords, other units...) return null.\nexport function toPx(value: unknown): number | null {\n\tif (typeof value !== \"string\") return null;\n\n\tconst match = /^(-?\\d*\\.?\\d+)(px|rem)$/.exec(value.trim());\n\tif (!match) return null;\n\n\tconst amount = Number.parseFloat(match[1] as string);\n\treturn match[2] === \"rem\" ? amount * REM_TO_PX : amount;\n}\n\n// Turn a theme section into [key, px] pairs, keeping only the values expressed in \"px\" or \"rem\".\nexport function toPxEntries(\n\tsection: Record<string, unknown> | undefined,\n): Array<[string, number]> {\n\treturn Object.entries(section ?? {}).flatMap(([key, value]) => {\n\t\tconst px = toPx(value);\n\t\treturn px === null ? [] : [[key, px] as [string, number]];\n\t});\n}\n\n// Flatten a nested color palette into [name, color] pairs (\"DEFAULT\" maps to the parent name), like Tailwind does.\nfunction colorEntries(\n\tpalette: ColorPalette,\n\tprefix: string,\n): Array<[string, ColorValue]> {\n\treturn Object.entries(palette).flatMap(([key, value]) => {\n\t\tconst name = key === \"DEFAULT\" ? prefix : prefix ? `${prefix}-${key}` : key;\n\n\t\tif (typeof value === \"object\" && value !== null) {\n\t\t\treturn colorEntries(value, name);\n\t\t}\n\n\t\treturn UNSUPPORTED_COLORS.has(name)\n\t\t\t? []\n\t\t\t: [[name, value] as [string, ColorValue]];\n\t});\n}\n\nexport function flattenColors(\n\tpalette: ColorPalette | undefined,\n): Record<string, ColorValue> {\n\treturn Object.fromEntries(colorEntries(palette ?? {}, \"\"));\n}\n\n// The stroke widths: every border width expressed in px or rem, except \"DEFAULT\" (it would create \"-s-DEFAULT-\" classes). \"1\" is always available since Tailwind has no \"border-1\".\nexport function strokeWidths(\n\tborderWidth: Record<string, unknown> | undefined,\n): Array<[string, number]> {\n\tconst entries = toPxEntries(borderWidth).filter(([key]) => key !== \"DEFAULT\");\n\treturn entries.some(([key]) => key === \"1\")\n\t\t? entries\n\t\t: [[\"1\", 1], ...entries];\n}\n","// The \".js\" extension is required: Tailwind CSS v3 has no \"exports\" map, so Node ESM needs the full file name.\nimport plugin from \"tailwindcss/plugin.js\";\nimport type { CSSRuleObject, PluginAPI } from \"tailwindcss/types/config.js\";\nimport { flattenColors, strokeWidths, toPxEntries } from \"./theme-values.js\";\n\ntype UtilityFactory = (color: string) => CSSRuleObject;\n\nfunction gridBackground(size: number, stroke: number): UtilityFactory {\n\treturn (color) => ({\n\t\tbackgroundImage: `linear-gradient(to right, ${color} ${stroke}px, transparent ${stroke}px),linear-gradient(to bottom, ${color} ${stroke}px, transparent ${stroke}px)`,\n\t\tbackgroundSize: `${size}px ${size}px`,\n\t});\n}\n\nfunction dotBackground(size: number, dotSize: number): UtilityFactory {\n\treturn (color) => ({\n\t\tbackgroundImage: `radial-gradient(${color} ${dotSize}px, transparent ${dotSize}px)`,\n\t\tbackgroundSize: `${size}px ${size}px`,\n\t});\n}\n\nconst tailwindDotGridBackgrounds = plugin(\n\t({ matchUtilities, theme }: PluginAPI) => {\n\t\t// Colors come from the \"backgroundColor\" theme (it includes \"colors\").\n\t\tconst colors = flattenColors(theme(\"backgroundColor\"));\n\n\t\t// Stroke widths (grid) and dot sizes come from the \"borderWidth\" theme, plus \"1\".\n\t\tconst strokes = strokeWidths(theme(\"borderWidth\"));\n\n\t\t// Grid square sizes and dot spacings come from the \"width\" theme values expressed in px or rem.\n\t\tconst sizes = toPxEntries(theme(\"width\"));\n\n\t\t// Tailwind types color values as strings, but a palette may also contain functions: both are handled by matchUtilities.\n\t\tconst values = colors as Record<string, string>;\n\n\t\tfor (const [strokeKey, stroke] of strokes) {\n\t\t\tfor (const [sizeKey, size] of sizes) {\n\t\t\t\tmatchUtilities(\n\t\t\t\t\t{\n\t\t\t\t\t\t[`bg-grid-${sizeKey}-s-${strokeKey}`]: gridBackground(size, stroke),\n\t\t\t\t\t\t[`bg-dot-${sizeKey}-s-${strokeKey}`]: dotBackground(size, stroke),\n\t\t\t\t\t},\n\t\t\t\t\t{ values, type: \"color\" },\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t},\n);\n\nexport default tailwindDotGridBackgrounds;\n"],"mappings":"wyBAAA,IAAMuB,EAAY,GAGZC,EAAqB,IAAI,IAAI,CAAC,SAAS,CAAC,EAM9C,SAAgBC,EAAK,EAA+B,CACnD,GAAI,OAAOC,GAAU,SAAU,OAAO,KAEtC,IAAMC,EAAQ,0BAA0B,KAAKD,EAAM,KAAK,CAAC,EACzD,GAAI,CAACC,EAAO,OAAO,KAEnB,IAAMC,EAAS,OAAO,WAAWD,EAAM,EAAY,EACnD,OAAOA,EAAM,KAAO,MAAQC,EAASL,EAAYK,CAClD,CAGA,SAAgBC,EACf,EAC0B,CAC1B,OAAO,OAAO,QAAQC,GAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAChB,EAAKY,KAAW,CAC9D,IAAMK,EAAKN,EAAKC,CAAK,EACrB,OAAOK,IAAO,KAAO,CAAC,EAAI,CAAC,CAACjB,EAAKiB,CAAE,CAAqB,CACzD,CAAC,CACF,CAGA,SAASC,EACR,EACA,EAC8B,CAC9B,OAAO,OAAO,QAAQC,CAAO,CAAC,CAAC,SAAS,CAACnB,EAAKY,KAAW,CACxD,IAAMQ,EAAOpB,IAAQ,UAAYqB,EAASA,EAAS,GAAGA,EAAO,GAAGrB,IAAQA,EAMxE,OAJI,OAAOY,GAAU,UAAYA,EACzBM,EAAaN,EAAOQ,CAAI,EAGzBV,EAAmB,IAAIU,CAAI,EAC/B,CAAC,EACD,CAAC,CAACA,EAAMR,CAAK,CAAyB,CAC1C,CAAC,CACF,CAEA,SAAgBU,EACf,EAC6B,CAC7B,OAAO,OAAO,YAAYJ,EAAaC,GAAW,CAAC,EAAG,EAAE,CAAC,CAC1D,CAGA,SAAgBI,EACf,EAC0B,CAC1B,IAAMC,EAAUT,EAAYU,CAAW,CAAC,CAAC,QAAQ,CAACzB,KAASA,IAAQ,SAAS,EAC5E,OAAOwB,EAAQ,MAAM,CAACxB,KAASA,IAAQ,GAAG,EACvCwB,EACA,CAAC,CAAC,IAAK,CAAC,EAAG,GAAGA,CAAO,CACzB,CCtDA,SAASE,EAAe,EAAc,EAAgC,CACrE,MAAQ,KAAW,CAClB,gBAAiB,6BAA6BC,EAAM,GAAGC,EAAO,kBAAkBA,EAAO,iCAAiCD,EAAM,GAAGC,EAAO,kBAAkBA,EAAO,KACjK,eAAgB,GAAGC,EAAK,KAAKA,EAAK,GACnC,EACD,CAEA,SAASC,EAAc,EAAc,EAAiC,CACrE,MAAQ,KAAW,CAClB,gBAAiB,mBAAmBH,EAAM,GAAGI,EAAQ,kBAAkBA,EAAQ,KAC/E,eAAgB,GAAGF,EAAK,KAAKA,EAAK,GACnC,EACD,QAEM,EAA6B3C,EAAAA,QAAAA,EACjC,CAAE,iBAAgB,WAAuB,CAEzC,IAAM8C,EAASV,EAAcW,EAAM,iBAAiB,CAAC,EAG/CC,EAAUX,EAAaU,EAAM,aAAa,CAAC,EAG3CE,EAAQpB,EAAYkB,EAAM,OAAO,CAAC,EAGlCG,EAASJ,EAEf,IAAK,GAAM,CAACK,EAAWT,KAAWM,EACjC,IAAK,GAAM,CAACI,EAAST,KAASM,EAC7BI,EACC,EACE,WAAWD,EAAQ,KAAKD,KAAcX,EAAeG,EAAMD,CAAM,GACjE,UAAUU,EAAQ,KAAKD,KAAcP,EAAcD,EAAMD,CAAM,CACjE,EACA,CAAE,SAAQ,KAAM,OAAQ,CACzB,CAGH"}

package/dist/theme-values.d.ts

@@ -1,9 +0,0 @@
-type ColorValue = string | ((...args: never[]) => string);
-type ColorPalette = {
-    [key: string]: ColorValue | ColorPalette;
-};
-export declare function toPx(value: unknown): number | null;
-export declare function toPxEntries(section: Record<string, unknown> | undefined): Array<[string, number]>;
-export declare function flattenColors(palette: ColorPalette | undefined): Record<string, ColorValue>;
-export declare function strokeWidths(borderWidth: Record<string, unknown> | undefined): Array<[string, number]>;
-export {};