phaser-wind 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 CassinoDev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,446 @@
+# 🌪️ Phaser Wind
+
+<center>
+<img src="data/image.png" height="350" style="margin: 0 auto;" alt="Phaser + TailWIND">
+</center>
+
+> **Tired of fighting with Phaser layouts and colors?**
+>
+> **Love Tailwind CSS but stuck with Phaser?**
+>
+> **Welcome to Phaser Wind** - bringing the joy and simplicity of Tailwind CSS design tokens to Phaser games! 🎮✨
+
+[![NPM Version](https://img.shields.io/npm/v/phaser-wind)](https://www.npmjs.com/package/phaser-wind)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+---
+
+## 🎯 Why Phaser Wind?
+
+### The Problem 😫
+
+```typescript
+// Ugh... more magic numbers and random colors
+const button = this.add.text(100, 50, 'Click me!', {
+  fontSize: '18px', // Is this too big? Too small? 🤷‍♂️
+  fill: '#3B82F6', // What color is this again?
+  backgroundColor: '#1F2937', // Does this even look good?
+});
+
+const title = this.add.text(200, 100, 'Game Title', {
+  fontSize: '32px', // Different magic number...
+  fill: '#EF4444', // Another random hex...
+});
+```
+
+### The Solution 🌟
+
+```typescript
+import { ColorPicker, FontSizePicker } from 'phaser-wind';
+
+// Clean, semantic, consistent!
+const button = this.add.text(100, 50, 'Click me!', {
+  fontSize: FontSizePicker.css('lg'), // Clear intention!
+  fill: ColorPicker.rgb('blue-500'), // Beautiful blue
+  backgroundColor: ColorPicker.rgb('gray-800'), // Perfect contrast
+});
+
+const title = this.add.text(200, 100, 'Game Title', {
+  fontSize: FontSizePicker.css('3xl'), // Clearly bigger!
+  fill: ColorPicker.rgb('red-500'), // Vibrant red
+});
+```
+
+---
+
+## 🚀 Features
+
+- 🎨 **Complete Tailwind Color Palette** - All 22 color families with 11 shades each
+- 📐 **Semantic Font Sizes** - From `xs` to `6xl`, just like Tailwind
+- 🔧 **TypeScript First** - Full type safety and IntelliSense
+- 🎮 **Phaser Ready** - Designed specifically for Phaser 3 games
+- 🌈 **Consistent Design** - No more guessing colors and sizes
+- 📦 **Tiny Bundle** - Zero runtime overhead, just better DX
+
+---
+
+## 📦 Installation
+
+```bash
+npm install phaser-wind
+# or
+yarn add phaser-wind
+# or
+pnpm add phaser-wind
+```
+
+---
+
+## 🎨 Color System
+
+### Complete Tailwind Palette
+
+Access all Tailwind colors with semantic naming:
+
+```typescript
+import { ColorPicker } from 'phaser-wind';
+
+// RGB strings (for Phaser text styles)
+const blueText = ColorPicker.rgb('blue-500'); // 'rgb(59, 130, 246)'
+const redButton = ColorPicker.rgb('red-600'); // 'rgb(220, 38, 38)'
+
+// Hex numbers (for Phaser graphics)
+const greenRect = ColorPicker.hex('green-400'); // 0x4ADE80
+const purpleCircle = ColorPicker.hex('purple-300'); // 0xD8B4FE
+
+// Basic colors
+const blackText = ColorPicker.rgb('black'); // 'rgb(0, 0, 0)'
+const whiteBackground = ColorPicker.hex('white'); // 0xFFFFFF
+```
+
+### Available Colors
+
+**Grays:** `slate`, `gray`, `zinc`, `neutral`, `stone`  
+**Colors:** `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`  
+**Shades:** `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `950`
+
+---
+
+## 📏 Font Size System
+
+### Semantic Sizing
+
+Stop guessing font sizes and use semantic tokens:
+
+```typescript
+import { FontSizePicker } from 'phaser-wind';
+
+// Get pixel values
+const smallText = FontSizePicker.px('sm'); // 14
+const normalText = FontSizePicker.px('md'); // 16
+const largeTitle = FontSizePicker.px('3xl'); // 30
+
+// Get CSS strings (perfect for Phaser)
+const buttonText = FontSizePicker.css('lg'); // '18px'
+const heroTitle = FontSizePicker.css('6xl'); // '60px'
+
+// Get rem values (if needed)
+const responsiveText = FontSizePicker.rem('xl'); // 1.25
+```
+
+### Font Size Scale
+
+| Token | Pixels | Use Case                |
+| ----- | ------ | ----------------------- |
+| `xs`  | 12px   | Small labels, captions  |
+| `sm`  | 14px   | Body text, descriptions |
+| `md`  | 16px   | Default text size       |
+| `lg`  | 18px   | Slightly larger text    |
+| `xl`  | 20px   | Subheadings             |
+| `2xl` | 24px   | Headings                |
+| `3xl` | 30px   | Large headings          |
+| `4xl` | 36px   | Hero text               |
+| `5xl` | 48px   | Display text            |
+| `6xl` | 60px   | Giant display text      |
+
+---
+
+## 💡 Real-World Examples
+
+### Game UI Components
+
+```typescript
+import { ColorPicker, FontSizePicker } from 'phaser-wind';
+
+export class GameScene extends Phaser.Scene {
+  create() {
+    // Main title
+    this.add
+      .text(400, 100, 'SPACE RAIDERS', {
+        fontSize: FontSizePicker.css('5xl'),
+        fill: ColorPicker.rgb('yellow-400'),
+        stroke: ColorPicker.rgb('yellow-800'),
+        strokeThickness: 2,
+      })
+      .setOrigin(0.5);
+
+    // Score display
+    this.add.text(50, 50, 'Score: 12,500', {
+      fontSize: FontSizePicker.css('xl'),
+      fill: ColorPicker.rgb('green-400'),
+    });
+
+    // Health bar background
+    const healthBg = this.add.graphics();
+    healthBg.fillStyle(ColorPicker.hex('red-900'));
+    healthBg.fillRect(50, 100, 200, 20);
+
+    // Health bar fill
+    const healthFill = this.add.graphics();
+    healthFill.fillStyle(ColorPicker.hex('red-500'));
+    healthFill.fillRect(52, 102, 156, 16); // 80% health
+
+    // Game over screen
+    this.add.rectangle(400, 300, 600, 400, ColorPicker.hex('slate-900'), 0.9);
+
+    this.add
+      .text(400, 250, 'GAME OVER', {
+        fontSize: FontSizePicker.css('4xl'),
+        fill: ColorPicker.rgb('red-500'),
+      })
+      .setOrigin(0.5);
+
+    this.add
+      .text(400, 320, 'Final Score: 12,500', {
+        fontSize: FontSizePicker.css('2xl'),
+        fill: ColorPicker.rgb('slate-300'),
+      })
+      .setOrigin(0.5);
+  }
+}
+```
+
+### Button System
+
+```typescript
+class GameButton {
+  constructor(
+    scene: Phaser.Scene,
+    x: number,
+    y: number,
+    text: string,
+    variant: 'primary' | 'secondary' | 'danger' = 'primary'
+  ) {
+    const colors = {
+      primary: {
+        bg: ColorPicker.hex('blue-600'),
+        bgHover: ColorPicker.hex('blue-700'),
+        text: ColorPicker.rgb('white'),
+      },
+      secondary: {
+        bg: ColorPicker.hex('slate-600'),
+        bgHover: ColorPicker.hex('slate-700'),
+        text: ColorPicker.rgb('slate-100'),
+      },
+      danger: {
+        bg: ColorPicker.hex('red-600'),
+        bgHover: ColorPicker.hex('red-700'),
+        text: ColorPicker.rgb('white'),
+      },
+    };
+
+    const style = colors[variant];
+
+    // Background
+    this.background = scene.add
+      .rectangle(x, y, 200, 50, style.bg)
+      .setInteractive()
+      .on('pointerover', () => this.background.setFillStyle(style.bgHover))
+      .on('pointerout', () => this.background.setFillStyle(style.bg));
+
+    // Text
+    this.text = scene.add
+      .text(x, y, text, {
+        fontSize: FontSizePicker.css('lg'),
+        fill: style.text,
+      })
+      .setOrigin(0.5);
+  }
+}
+
+// Usage
+const playButton = new GameButton(this, 400, 200, 'PLAY', 'primary');
+const settingsButton = new GameButton(this, 400, 280, 'SETTINGS', 'secondary');
+const quitButton = new GameButton(this, 400, 360, 'QUIT', 'danger');
+```
+
+### Particle Effects with Color Harmony
+
+```typescript
+// Create harmonious particle effects
+this.add.particles(player.x, player.y, 'sparkle', {
+  speed: { min: 50, max: 100 },
+  tint: [
+    ColorPicker.hex('blue-400'),
+    ColorPicker.hex('blue-500'),
+    ColorPicker.hex('blue-600'),
+    ColorPicker.hex('cyan-400'),
+    ColorPicker.hex('cyan-500'),
+  ],
+  lifespan: 1000,
+});
+```
+
+---
+
+## 🎮 Integration with Phaser
+
+### Scene Setup
+
+```typescript
+import { ColorPicker, FontSizePicker } from 'phaser-wind';
+
+export class MenuScene extends Phaser.Scene {
+  constructor() {
+    super({ key: 'MenuScene' });
+  }
+
+  create() {
+    // Background gradient effect
+    const bg = this.add.graphics();
+    bg.fillGradientStyle(
+      ColorPicker.hex('slate-900'), // top-left
+      ColorPicker.hex('slate-800'), // top-right
+      ColorPicker.hex('slate-800'), // bottom-left
+      ColorPicker.hex('slate-700') // bottom-right
+    );
+    bg.fillRect(0, 0, this.cameras.main.width, this.cameras.main.height);
+
+    // Consistent UI elements
+    this.createTitle();
+    this.createMenu();
+  }
+
+  private createTitle() {
+    this.add
+      .text(this.cameras.main.centerX, 150, 'MY AWESOME GAME', {
+        fontSize: FontSizePicker.css('4xl'),
+        fill: ColorPicker.rgb('yellow-400'),
+        stroke: ColorPicker.rgb('yellow-700'),
+        strokeThickness: 3,
+      })
+      .setOrigin(0.5);
+  }
+
+  private createMenu() {
+    const menuItems = ['Play', 'Options', 'Credits', 'Quit'];
+
+    menuItems.forEach((item, index) => {
+      this.add
+        .text(this.cameras.main.centerX, 250 + index * 60, item, {
+          fontSize: FontSizePicker.css('xl'),
+          fill: ColorPicker.rgb('slate-300'),
+        })
+        .setOrigin(0.5)
+        .setInteractive()
+        .on('pointerover', function () {
+          this.setTint(ColorPicker.hex('yellow-400'));
+        })
+        .on('pointerout', function () {
+          this.clearTint();
+        });
+    });
+  }
+}
+```
+
+---
+
+## 🔧 Advanced Usage
+
+### Custom Color Schemes
+
+```typescript
+// Create consistent themes
+const darkTheme = {
+  background: ColorPicker.hex('slate-900'),
+  surface: ColorPicker.hex('slate-800'),
+  primary: ColorPicker.hex('blue-500'),
+  secondary: ColorPicker.hex('slate-600'),
+  text: ColorPicker.rgb('slate-100'),
+  textMuted: ColorPicker.rgb('slate-400'),
+};
+
+const lightTheme = {
+  background: ColorPicker.hex('slate-50'),
+  surface: ColorPicker.hex('white'),
+  primary: ColorPicker.hex('blue-600'),
+  secondary: ColorPicker.hex('slate-200'),
+  text: ColorPicker.rgb('slate-900'),
+  textMuted: ColorPicker.rgb('slate-600'),
+};
+```
+
+### Responsive Text Sizing
+
+```typescript
+// Scale text based on screen size
+const getResponsiveTextSize = (baseSize: FontSizeKey): string => {
+  const scale = this.cameras.main.width / 1920; // Base on 1920px width
+  const basePixels = FontSizePicker.px(baseSize);
+  return `${Math.round(basePixels * scale)}px`;
+};
+
+this.add.text(x, y, 'Responsive Text', {
+  fontSize: getResponsiveTextSize('2xl'),
+  fill: ColorPicker.rgb('blue-500'),
+});
+```
+
+---
+
+## 🤝 Why "Wind" instead of "Tailwind"?
+
+We love Tailwind CSS, but we're not affiliated with them. "Phaser Wind" captures the essence:
+
+- **Wind** = Fast, natural, refreshing (like your development experience)
+- **Wind** = Carries things forward (like your game development)
+- **Wind** = Invisible but powerful (like good design tokens)
+
+Plus, `phaser-wind` is way easier to type than `phaser-tailwind-css-design-tokens-for-games` 😉
+
+---
+
+## 📚 Compared to Raw Phaser
+
+| Without Phaser Wind      | With Phaser Wind                     |
+| ------------------------ | ------------------------------------ |
+| `fill: '#3B82F6'`        | `fill: ColorPicker.rgb('blue-500')`  |
+| `fontSize: '18px'`       | `fontSize: FontSizePicker.css('lg')` |
+| `tint: 0x4ADE80`         | `tint: ColorPicker.hex('green-400')` |
+| Magic numbers everywhere | Semantic, consistent tokens          |
+| Color picking hell       | Harmonious color palettes            |
+| Inconsistent sizing      | Perfect typography scale             |
+
+---
+
+## 🔮 Coming Soon
+
+- 🎯 **Spacing System** - Consistent margins and padding tokens
+- 📐 **Layout Utilities** - Flexbox-inspired alignment helpers
+- 🎨 **Theme System** - Easy dark/light mode switching
+- 📱 **Responsive Utilities** - Breakpoint-based design tokens
+- ⚡ **Animation Presets** - Smooth, consistent transitions
+
+---
+
+## 🤝 Contributing
+
+We'd love your help making Phaser Wind even better!
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+---
+
+## 📄 License
+
+MIT © [CassinoDev](https://github.com/cassinodev)
+
+---
+
+## 🌟 Show Your Support
+
+If Phaser Wind makes your game development life better, give us a ⭐ on GitHub!
+
+**Happy Gaming!** 🎮✨
+
+---
+
+> _"Making Phaser development as enjoyable as Tailwind CSS"_
+>
+> — The Phaser Wind Team

package/dist/color/color-picker.d.ts

@@ -0,0 +1,13 @@
+import { pallete } from './pallete';
+export type ColorKey = keyof typeof pallete;
+export type ShadeKey = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';
+export type ColorToken = `${ColorKey}-${ShadeKey}` | 'black' | 'white';
+export declare class ColorPicker {
+    private colorKey;
+    constructor(colorKey: ColorKey);
+    static rgb(color: ColorToken): string;
+    static hex(color: ColorToken): number;
+    getRgb(shade: ShadeKey): string;
+    getHex(shade: ShadeKey): number;
+}
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/color/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../src/color/color-picker.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,OAAO,CAAC;AAC5C,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AACV,MAAM,MAAM,UAAU,GAAG,GAAG,QAAQ,IAAI,QAAQ,EAAE,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvE,qBAAa,WAAW;IACV,OAAO,CAAC,QAAQ;gBAAR,QAAQ,EAAE,QAAQ;IAEtC,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAUrC,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAoBrC,MAAM,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM;IAQ/B,MAAM,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM;CAmBhC"}

package/dist/color/color-picker.js

@@ -0,0 +1,61 @@
+/* eslint-disable no-magic-numbers */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { pallete } from './pallete';
+export class ColorPicker {
+    colorKey;
+    constructor(colorKey) {
+        this.colorKey = colorKey;
+    }
+    static rgb(color) {
+        const parts = color.split('-');
+        if (parts.length === 2) {
+            const colorKey = parts[0];
+            const shade = parts[1];
+            return pallete[colorKey][shade];
+        }
+        return pallete[color];
+    }
+    static hex(color) {
+        const parts = color.split('-');
+        if (parts.length === 2) {
+            const colorKey = parts[0];
+            const shade = parts[1];
+            const colorPicker = new ColorPicker(colorKey);
+            return colorPicker.getHex(shade);
+        }
+        const colorToConvert = pallete[color];
+        // Handle 3-digit hex values like #fff by expanding them to 6 digits
+        const hex = colorToConvert.slice(1);
+        if (hex.length === 3) {
+            const r = parseInt(hex[0] + hex[0], 16);
+            const g = parseInt(hex[1] + hex[1], 16);
+            const b = parseInt(hex[2] + hex[2], 16);
+            return (r << 16) + (g << 8) + b;
+        }
+        return parseInt(hex, 16);
+    }
+    getRgb(shade) {
+        const color = pallete[this.colorKey];
+        if (typeof color === 'string') {
+            return color;
+        }
+        return color[shade];
+    }
+    getHex(shade) {
+        const rgb = this.getRgb(shade);
+        if (rgb.startsWith('#')) {
+            return parseInt(rgb.slice(1), 16);
+        }
+        // Extract RGB values from string like 'rgb(x, y, z)'
+        const matches = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+        if (!matches) {
+            throw new Error(`Invalid RGB format: ${rgb}`);
+        }
+        const r = parseInt(matches[1]);
+        const g = parseInt(matches[2]);
+        const b = parseInt(matches[3]);
+        // Convert to hex number format 0xRRGGBB
+        return (r << 16) + (g << 8) + b;
+    }
+}
+//# sourceMappingURL=color-picker.js.map

package/dist/color/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../src/color/color-picker.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,6DAA6D;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAiBpC,MAAM,OAAO,WAAW;IACF;IAApB,YAAoB,QAAkB;QAAlB,aAAQ,GAAR,QAAQ,CAAU;IAAG,CAAC;IAE1C,MAAM,CAAC,GAAG,CAAC,KAAiB;QAC1B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAa,CAAC;YACtC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAa,CAAC;YACnC,OAAO,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAW,CAAC;QAC5C,CAAC;QACD,OAAO,OAAO,CAAC,KAA0B,CAAW,CAAC;IACvD,CAAC;IAED,MAAM,CAAC,GAAG,CAAC,KAAiB;QAC1B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAa,CAAC;YACtC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAa,CAAC;YACnC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC;YAC9C,OAAO,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;QACD,MAAM,cAAc,GAAG,OAAO,CAAC,KAA0B,CAAW,CAAC;QACrE,oEAAoE;QACpE,MAAM,GAAG,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACpC,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACrB,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAE,GAAG,GAAG,CAAC,CAAC,CAAE,EAAE,EAAE,CAAC,CAAC;YAC1C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAE,GAAG,GAAG,CAAC,CAAC,CAAE,EAAE,EAAE,CAAC,CAAC;YAC1C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAE,GAAG,GAAG,CAAC,CAAC,CAAE,EAAE,EAAE,CAAC,CAAC;YAC1C,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;QACD,OAAO,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,CAAC,KAAe;QACpB,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,KAAK,CAAC;QACf,CAAC;QACD,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAED,MAAM,CAAC,KAAe;QACpB,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YACxB,OAAO,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QACpC,CAAC;QAED,qDAAqD;QACrD,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,gCAAgC,CAAC,CAAC;QAC5D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,MAAM,IAAI,KAAK,CAAC,uBAAuB,GAAG,EAAE,CAAC,CAAC;QAChD,CAAC;QAED,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAE,CAAC,CAAC;QAChC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAE,CAAC,CAAC;QAChC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAE,CAAC,CAAC;QAEhC,wCAAwC;QACxC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAClC,CAAC;CACF"}

package/dist/color/color-picker.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=color-picker.spec.d.ts.map

package/dist/color/color-picker.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.spec.d.ts","sourceRoot":"","sources":["../../src/color/color-picker.spec.ts"],"names":[],"mappings":""}

package/dist/color/color-picker.spec.js

@@ -0,0 +1,41 @@
+/* eslint-disable no-magic-numbers */
+/* eslint-disable max-lines-per-function */
+import { describe, expect, it } from 'vitest';
+import { ColorPicker } from './color-picker';
+describe('ColorPicker', () => {
+    it('should get the correct hex value for a shade', () => {
+        const colorPicker = new ColorPicker('slate');
+        expect(colorPicker.getHex('50')).toBe(0xf8fafc);
+    });
+    it.each([
+        ['slate', '50', 0xf8fafc],
+        ['slate', '900', 0x0f172a],
+        ['rose', '500', 0xf43f5e],
+        ['fuchsia', '400', 0xe879f9],
+        ['zinc', '200', 0xe4e4e7],
+        ['gray', '600', 0x4b5563],
+        ['pink', '300', 0xf9a8d4],
+        ['stone', '700', 0x44403c],
+    ])('should convert %s-%s to hex %s', (color, shade, expected) => {
+        const colorPicker = new ColorPicker(color);
+        expect(colorPicker.getHex(shade)).toBe(expected);
+    });
+    it('should convert color token to rgb using static method', () => {
+        expect(ColorPicker.rgb('slate-50')).toBe('rgb(248, 250, 252)');
+        expect(ColorPicker.rgb('black')).toBe('#000');
+        expect(ColorPicker.rgb('white')).toBe('#fff');
+    });
+    it('should convert color token to hex using static method', () => {
+        expect(ColorPicker.hex('slate-50')).toBe(0xf8fafc);
+        expect(ColorPicker.hex('black')).toBe(0x000000);
+        expect(ColorPicker.hex('white')).toBe(0xffffff);
+        expect(ColorPicker.hex('slate-900')).toBe(0x0f172a);
+        expect(ColorPicker.hex('slate-500')).toBe(0x64748b);
+        expect(ColorPicker.hex('slate-200')).toBe(0xe2e8f0);
+        expect(ColorPicker.hex('slate-100')).toBe(0xf1f5f9);
+        expect(ColorPicker.hex('slate-50')).toBe(0xf8fafc);
+        expect(ColorPicker.hex('slate-950')).toBe(0x020617);
+        expect(ColorPicker.hex('slate-800')).toBe(0x1e293b);
+    });
+});
+//# sourceMappingURL=color-picker.spec.js.map

package/dist/color/color-picker.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.spec.js","sourceRoot":"","sources":["../../src/color/color-picker.spec.ts"],"names":[],"mappings":"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"}

package/dist/color/index.d.ts

@@ -0,0 +1,3 @@
+export * from './color-picker';
+export * from './pallete';
+//# sourceMappingURL=index.d.ts.map

package/dist/color/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC"}

package/dist/color/index.js

@@ -0,0 +1,3 @@
+export * from './color-picker';
+export * from './pallete';
+//# sourceMappingURL=index.js.map

package/dist/color/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/color/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC"}