feat: create media query provider

src/index.ts

@@ -7,4 +7,6 @@ export * from './deprecated/motion'
 export * from './deprecated/shape'
 export * from './deprecated/typography'
 
-export * from './tokens/index'
+export * from './media-queries/index'
+export * from './tokens/index'
+

src/media-queries/index.ts

@@ -0,0 +1,3 @@
+export * from './provide-window-media-query';
+export * from './window-media-query';
+

src/media-queries/provide-window-media-query.ts

@@ -0,0 +1,3 @@
+import { WindowMediaQueryProvider } from "./window-media-query";
+
+export const provideWindowMediaQuery = () => new WindowMediaQueryProvider()

src/media-queries/window-media-query.ts

@@ -0,0 +1,41 @@
+import plugin from "tailwindcss/plugin";
+import type { IProvider } from "../declaration/provider.interface";
+import { Strings } from "../utils/strings";
+
+interface IWindowMediaQuery {
+    compact: string
+    medium: string
+    expanded: string
+    large: string
+    extraLarge: string
+}
+
+class DefaultWindowMediaQueryTokens implements IWindowMediaQuery {
+    compact = '@media (max-width: 600px)'
+    medium = '@media (min-width: 600px) and (max-width: 840px)'
+    expanded = '@media (min-width: 840px) and (max-width: 1200px)'
+    large = '@media (min-width: 1200px) and (max-width: 1600px)'
+    extraLarge = '@media (min-width: 1600px)'
+
+    public get defaultTokenRecord() {
+        return {
+            compact: this.compact,
+            medium: this.medium,
+            expanded: this.expanded,
+            large: this.large,
+            extraLarge: this.extraLarge,
+        }
+    }
+}
+
+export class WindowMediaQueryProvider extends DefaultWindowMediaQueryTokens implements IProvider {
+
+    getPlugin() {
+        return plugin(({ addVariant }) => {
+            for (const mq of Object.entries(this.defaultTokenRecord)) {
+                addVariant(Strings.toKebabCase(mq[0]), mq[1])
+            }
+        })
+    }
+
+}