From a89038a4383a61b5fda50036814ff9048a7235b3 Mon Sep 17 00:00:00 2001
From: bre97-web <bre97-web@outlook.com>
Date: Fri, 30 Aug 2024 12:26:15 +0800
Subject: [PATCH] feat: create media query provider

---
 src/index.ts                                  |  4 +-
 src/media-queries/index.ts                    |  3 ++
 .../provide-window-media-query.ts             |  3 ++
 src/media-queries/window-media-query.ts       | 41 +++++++++++++++++++
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/media-queries/index.ts
 create mode 100644 src/media-queries/provide-window-media-query.ts
 create mode 100644 src/media-queries/window-media-query.ts

diff --git a/src/index.ts b/src/index.ts
index a0072c1..b8c5e94 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,4 +7,6 @@ export * from './deprecated/motion'
 export * from './deprecated/shape'
 export * from './deprecated/typography'
 
-export * from './tokens/index'
\ No newline at end of file
+export * from './media-queries/index'
+export * from './tokens/index'
+
diff --git a/src/media-queries/index.ts b/src/media-queries/index.ts
new file mode 100644
index 0000000..75c949f
--- /dev/null
+++ b/src/media-queries/index.ts
@@ -0,0 +1,3 @@
+export * from './provide-window-media-query';
+export * from './window-media-query';
+
diff --git a/src/media-queries/provide-window-media-query.ts b/src/media-queries/provide-window-media-query.ts
new file mode 100644
index 0000000..7f717cb
--- /dev/null
+++ b/src/media-queries/provide-window-media-query.ts
@@ -0,0 +1,3 @@
+import { WindowMediaQueryProvider } from "./window-media-query";
+
+export const provideWindowMediaQuery = () => new WindowMediaQueryProvider()
diff --git a/src/media-queries/window-media-query.ts b/src/media-queries/window-media-query.ts
new file mode 100644
index 0000000..0c85003
--- /dev/null
+++ b/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])
+            }
+        })
+    }
+
+}