chore: lint.

.github/workflows/test.yml

@@ -18,7 +18,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: 18
-          cache: 'pnpm'
+          cache: "pnpm"
       - name: Install Dependencies
         run: pnpm i
       - name: Check Linting

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

README.md

@@ -7,6 +7,7 @@ Checkout full documents: https://svdm.dev/
 ## What is SVDM?
 
 **SVDM** (**S**tyling **V**ariance **D**ecomposition **M**odule) is a multi-dimensional styling variance decomposition system in TypeScript that allows you to define and manage style variations in a structured and scalable way. This module comes extremely handy when:
+
 - you are building a complex design system with variations that affect multiple components or tags,
 - you are working on a high-quality UI component library that has put so much effort on design details,
 - or you are tired of defining config definition typings again and again.
@@ -28,7 +29,7 @@ npm install svdm
 This is an example of how you can use SVDM to define advanced variances for your components. More examples can be found in the [documentation](https://svdm.dev/).
 
 ```typescript
-import { svd } from 'svdm';
+import { svd } from "svdm";
 
 const buttonVariants = svd({
   variants: {
@@ -38,52 +39,52 @@ const buttonVariants = svd({
       // We have type hints to ensure consistent typing across variances.
       // Such that `primary` and `secondary` must be the same type.
       primary: {
-        base: 'bg-primary hover:bg-primary-11 text-primary-1',
-        disabled: 'bg-primary-8 text-primary-1 cursor-not-allowed',
-        loadingSpinner: 'text-primary-1',
+        base: "bg-primary hover:bg-primary-11 text-primary-1",
+        disabled: "bg-primary-8 text-primary-1 cursor-not-allowed",
+        loadingSpinner: "text-primary-1",
       },
       secondary: {
-        base: 'bg-secondary hover:bg-secondary-11 text-secondary-1',
-        disabled: 'bg-secondary-8 text-secondary-1 cursor-not-allowed',
-        loadingSpinner: 'text-secondary-1',
+        base: "bg-secondary hover:bg-secondary-11 text-secondary-1",
+        disabled: "bg-secondary-8 text-secondary-1 cursor-not-allowed",
+        loadingSpinner: "text-secondary-1",
       },
       // And more as you define, such as tertiary, destructive, etc.
     },
     size: {
-      small: 'h-10 px-4',
-      medium: 'h-12 px-5',
-      large: 'h-14 px-6',
+      small: "h-10 px-4",
+      medium: "h-12 px-5",
+      large: "h-14 px-6",
     },
   },
   defaultVariants: {
-    variant: 'primary',
-    size: 'medium',
+    variant: "primary",
+    size: "medium",
   },
 });
 ```
 
 Alternatively, you can use it just like CVA:
 
 ```typescript
-import { svd } from 'svdm';
+import { svd } from "svdm";
 
 const buttonVariants = svd({
   variants: {
     variant: {
       // We are using Radix Colors with Tailwind CSS.
       // Check `radix-colors-tailwind` package if you are interested.
-      primary: 'bg-primary hover:bg-primary-11 text-primary-1',
-      secondary: 'bg-secondary hover:bg-secondary-11 text-secondary-1',
+      primary: "bg-primary hover:bg-primary-11 text-primary-1",
+      secondary: "bg-secondary hover:bg-secondary-11 text-secondary-1",
     },
     size: {
-      small: 'h-10 px-4',
-      medium: 'h-12 px-5',
-      large: 'h-14 px-6',
+      small: "h-10 px-4",
+      medium: "h-12 px-5",
+      large: "h-14 px-6",
     },
   },
   defaultVariants: {
-    variant: 'primary',
-    size: 'medium',
+    variant: "primary",
+    size: "medium",
   },
 });
 ```

docs/src/content/config.ts

@@ -1,6 +1,6 @@
-import { defineCollection } from 'astro:content';
-import { docsSchema } from '@astrojs/starlight/schema';
+import { defineCollection } from "astro:content";
+import { docsSchema } from "@astrojs/starlight/schema";
 
 export const collections = {
-	docs: defineCollection({ schema: docsSchema() }),
+  docs: defineCollection({ schema: docsSchema() }),
 };

docs/src/content/docs/index.md

@@ -14,6 +14,7 @@ SVDM Documentation is still under development (partially finished). We are worki
 :::
 
 **SVDM** (**S**tyling **V**ariance **D**ecomposition **M**odule) is a multi-dimensional styling variance decomposition system in TypeScript that allows you to define and manage style variations in a structured and scalable way. This module comes extremely handy when:
+
 - you are building a complex design system with variations that affect multiple components or tags,
 - you are working on a high-quality UI component library that has put so much effort on design details,
 - or you are tired of defining config definition typings again and again.

docs/src/content/docs/logistics/installation.md

@@ -17,17 +17,17 @@ Once you have installed SVDM, you can import it into your project.
 
 ```typescript
 // Please note that the function is called `svd` because "m" means module.
-import { svd } from 'svdm';
+import { svd } from "svdm";
 ```
 
 If you need type hints for component props, you can import the type as well.
 
 ```typescript
-import type { SVDMProps } from 'svdm';
+import type { SVDMProps } from "svdm";
 ```
 
 Or you can import both at the same time.
 
 ```typescript
-import { svd, SVDMProps } from 'svdm';
+import { svd, SVDMProps } from "svdm";
 ```

docs/src/content/docs/logistics/typescript.md

@@ -12,61 +12,61 @@ This document will guide you through what you can expect from SVDM when messing
 Let's get started with a very simple example. We have one variant called `variant` and it has two variations: `primary` and `secondary`.
 
 ```typescript
-import { svd } from 'svdm';
+import { svd } from "svdm";
 
 const variants = svd({
   variants: {
     variant: {
-      primary: 'text-primary',
-      secondary: 'text-secondary',
+      primary: "text-primary",
+      secondary: "text-secondary",
     },
   },
   defaultVariants: {
-    variant: 'primary',
+    variant: "primary",
   },
 });
 ```
 
 In this example, if we change the value of the secondary variance to a number, it will throw a TypeScript typing error that warns you about the type mismatch.
 
 ```typescript {7-8}
-import { svd } from 'svdm';
+import { svd } from "svdm";
 
 const variants = svd({
   variants: {
     variant: {
-      primary: 'text-primary',
+      primary: "text-primary",
       // This will throw a TypeScript error about the type mismatch.
       secondary: 4,
     },
   },
   defaultVariants: {
-    variant: 'primary',
+    variant: "primary",
   },
 });
 ```
 
 Same thing happens for nested objects as well. By default, we expect that all the variations of a variant should have the same type. If you try to assign a different type to a variation, TypeScript will throw an error.
 
 ```typescript {10-14}
-import { svd } from 'svdm';
+import { svd } from "svdm";
 
 const variants = svd({
   variants: {
     variant: {
       primary: {
-        base: 'bg-primary hover:bg-primary-11',
-        disabled: 'bg-primary-8',
+        base: "bg-primary hover:bg-primary-11",
+        disabled: "bg-primary-8",
       },
       // This will throw a TypeScript error about the type mismatch.
       // The key `disabled` cannot be found.
       secondary: {
-        base: 'bg-primary hover:bg-primary-11',
+        base: "bg-primary hover:bg-primary-11",
       },
     },
   },
   defaultVariants: {
-    variant: 'primary',
+    variant: "primary",
   },
 });
 ```
@@ -77,7 +77,7 @@ In some cases, you may want to have a optional types for a specific variation. Y
 
 ```typescript {1,4-8,12-13}
 // You need an additional import `singleton` from `svdm`.
-import { svd, singleton } from 'svdm';
+import { svd, singleton } from "svdm";
 
 // Define your own type for explicit typing.
 type CustomVariant = {
@@ -90,17 +90,17 @@ const variants = svd({
     // You need to use `singleton` function in this way!
     preset: singleton<CustomVariant>().use({
       greetings: {
-        title: 'Hello, World!',
-        subtitle: 'This is a subtitle',
+        title: "Hello, World!",
+        subtitle: "This is a subtitle",
       },
       briefings: {
         // The `subtitle` is optional in your type, so it won't throw an error.
-        title: 'Goodbye, World!',
+        title: "Goodbye, World!",
       },
     }),
   },
   defaultVariants: {
-    preset: 'greetings',
+    preset: "greetings",
   },
 });
 ```

docs/src/content/docs/logistics/use-case-snippets.md

@@ -8,7 +8,7 @@ For completed use cases, please refer to the **Usages** section in sidebar. Ther
 ## Advanced Variances
 
 ```typescript
-import { svd } from 'svdm';
+import { svd } from "svdm";
 
 const buttonVariants = svd({
   variants: {
@@ -18,26 +18,26 @@ const buttonVariants = svd({
       // We have type hints to ensure consistent typing across variances.
       // Such that `primary` and `secondary` must be the same type.
       primary: {
-        base: 'bg-primary hover:bg-primary-11 text-primary-1',
-        disabled: 'bg-primary-8 text-primary-1 cursor-not-allowed',
-        loadingSpinner: 'text-primary-1',
+        base: "bg-primary hover:bg-primary-11 text-primary-1",
+        disabled: "bg-primary-8 text-primary-1 cursor-not-allowed",
+        loadingSpinner: "text-primary-1",
       },
       secondary: {
-        base: 'bg-secondary hover:bg-secondary-11 text-secondary-1',
-        disabled: 'bg-secondary-8 text-secondary-1 cursor-not-allowed',
-        loadingSpinner: 'text-secondary-1',
+        base: "bg-secondary hover:bg-secondary-11 text-secondary-1",
+        disabled: "bg-secondary-8 text-secondary-1 cursor-not-allowed",
+        loadingSpinner: "text-secondary-1",
       },
       // And more as you define, such as tertiary, destructive, etc.
     },
     size: {
-      small: 'h-10 px-4',
-      medium: 'h-12 px-5',
-      large: 'h-14 px-6',
+      small: "h-10 px-4",
+      medium: "h-12 px-5",
+      large: "h-14 px-6",
     },
   },
   defaultVariants: {
-    variant: 'primary',
-    size: 'medium',
+    variant: "primary",
+    size: "medium",
   },
 });
 ```
@@ -49,26 +49,25 @@ You don't have to define an object at all time. I know if some components have f
 Our type hints will work perfectly with this simple structure as well, as it will infer the type of `string` for the output of `variant` key.
 
 ```typescript
-import { svd } from 'svdm';
+import { svd } from "svdm";
 
 const buttonVariants = svd({
   variants: {
     variant: {
       // We are using Radix Colors with Tailwind CSS.
       // Check `radix-colors-tailwind` package if you are interested.
-      primary: 'bg-primary hover:bg-primary-11 text-primary-1',
-      secondary: 'bg-secondary hover:bg-secondary-11 text-secondary-1',
+      primary: "bg-primary hover:bg-primary-11 text-primary-1",
+      secondary: "bg-secondary hover:bg-secondary-11 text-secondary-1",
     },
     size: {
-      small: 'h-10 px-4',
-      medium: 'h-12 px-5',
-      large: 'h-14 px-6',
+      small: "h-10 px-4",
+      medium: "h-12 px-5",
+      large: "h-14 px-6",
     },
   },
   defaultVariants: {
-    variant: 'primary',
-    size: 'medium',
+    variant: "primary",
+    size: "medium",
   },
 });
 ```
-

docs/tsconfig.json

@@ -1,3 +1,3 @@
 {
   "extends": "astro/tsconfigs/strict"
-}
+}