Upgrade Project Dependencies

docs/beta/astro.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 import tailwind from "@astrojs/tailwind";
-import vercel from "@astrojs/vercel/static";
+import vercel from "@astrojs/vercel";
 
 const site = "https://beta.cva.style";
 const googleAnalyticsId = "G-E8Z8HL9WXF";
@@ -105,8 +105,8 @@ export default defineConfig({
           link: "/tutorials",
         },
         {
-          label: "FAQs ↗",
-          link: "https://cva.style/docs/faqs",
+          label: "FAQs",
+          link: "/faqs",
         },
         {
           label: "Sponsor ♡",

docs/beta/package.json

@@ -11,18 +11,18 @@
     "start": "astro dev"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.3",
-    "@astrojs/starlight": "^0.28.2",
-    "@astrojs/starlight-tailwind": "^2.0.3",
-    "@astrojs/tailwind": "^5.1.1",
-    "@astrojs/ts-plugin": "^1.10.2",
-    "@astrojs/vercel": "^7.8.1",
-    "astro": "^4.15.9",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/starlight": "^0.31.1",
+    "@astrojs/starlight-tailwind": "^3.0.0",
+    "@astrojs/tailwind": "^5.1.4",
+    "@astrojs/ts-plugin": "^1.10.4",
+    "@astrojs/vercel": "^8.0.2",
+    "astro": "^5.1.7",
     "cva": "workspace:*",
     "date-fns": "3.6.0",
     "sharp": "^0.33.2",
     "tailwindcss": "^3.4.3",
-    "tiny-invariant": "1.3.1",
-    "typescript": "5.4.5"
+    "tiny-invariant": "1.3.3",
+    "typescript": "5.7.3"
   }
 }

docs/beta/src/content/config.ts → docs/beta/src/content.config.ts

@@ -1,11 +1,13 @@
+import { glob } from "astro/loaders";
 import { defineCollection, z } from "astro:content";
+import { docsLoader } from "@astrojs/starlight/loaders";
 import { docsSchema } from "@astrojs/starlight/schema";
 import { format } from "date-fns";
 
 export const collections = {
-  docs: defineCollection({ schema: docsSchema() }),
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
   tutorials: defineCollection({
-    type: "data",
+    loader: glob({ pattern: "**/*.json", base: "./src/content/tutorials" }),
     schema: () => {
       const common = z.object({
         title: z.string(),

docs/beta/src/content/docs/api-reference.mdx

@@ -72,9 +72,9 @@ Generate `cva`, `cx` and `compose` functions based on your preferred configurati
 Store in a `cva.config.ts` file, and import across your project.
 
 ```ts
+// cva.config.ts
 import { defineConfig } from "cva";
 
-// cva.config.ts
 export const { cva, cx, compose } = defineConfig(options);
 ```
 

docs/beta/src/content/docs/examples/11ty.mdx

@@ -2,6 +2,11 @@
 title: 11ty
 ---
 
+:::caution
+**You are currently viewing the docs for `cva@beta`**  
+For stable documentation, please visit [cva.style](https://cva.style).
+:::
+
 ## Tailwind CSS
 
 ```js

docs/beta/src/content/docs/examples/astro.mdx

@@ -2,6 +2,11 @@
 title: Astro
 ---
 
+:::caution
+**You are currently viewing the docs for `cva@beta`**  
+For stable documentation, please visit [cva.style](https://cva.style).
+:::
+
 import StackBlitz from "../../../components/stackblitz.astro";
 
 ## Tailwind CSS

docs/beta/src/content/docs/examples/bem.mdx

@@ -2,6 +2,11 @@
 title: BEM
 ---
 
+:::caution
+**You are currently viewing the docs for `cva@beta`**  
+For stable documentation, please visit [cva.style](https://cva.style).
+:::
+
 ```css
 /* styles.css */
 .button {

docs/beta/src/content/docs/examples/other-use-cases.mdx

@@ -2,6 +2,11 @@
 title: Other Use Cases
 ---
 
+:::caution
+**You are currently viewing the docs for `cva@beta`**  
+For stable documentation, please visit [cva.style](https://cva.style).
+:::
+
 Although primarily designed for handling class names, at its core, `cva` is really just a fancy way of managing a string…
 
 ## Dynamic Text Content

docs/beta/src/content/docs/examples/react/css-modules.mdx

@@ -2,6 +2,11 @@
 title: React with CSS Modules
 ---
 
+:::caution
+**You are currently viewing the docs for `cva@beta`**  
+For stable documentation, please visit [cva.style](https://cva.style).
+:::
+
 import StackBlitz from "../../../../components/stackblitz.astro";
 
 <StackBlitz

docs/beta/src/content/docs/examples/react/tailwindcss.mdx

@@ -2,6 +2,11 @@
 title: React with Tailwind CSS
 ---
 
+:::caution
+**You are currently viewing the docs for `cva@beta`**  
+For stable documentation, please visit [cva.style](https://cva.style).
+:::
+
 import StackBlitz from "../../../../components/stackblitz.astro";
 
 ## Basic Component

docs/beta/src/content/docs/examples/svelte.mdx

@@ -2,6 +2,11 @@
 title: Svelte
 ---
 
+:::caution
+**You are currently viewing the docs for `cva@beta`**  
+For stable documentation, please visit [cva.style](https://cva.style).
+:::
+
 import StackBlitz from "../../../components/stackblitz.astro";
 
 <StackBlitz dir="examples/latest/svelte" file="src/components/button.svelte" />

docs/beta/src/content/docs/examples/vue.mdx

@@ -2,6 +2,11 @@
 title: Vue
 ---
 
+:::caution
+**You are currently viewing the docs for `cva@beta`**  
+For stable documentation, please visit [cva.style](https://cva.style).
+:::
+
 import StackBlitz from "../../../components/stackblitz.astro";
 
 <StackBlitz dir="examples/latest/vue" file="src/components/Button.vue" />

docs/beta/src/content/docs/faqs.mdx

@@ -0,0 +1,64 @@
+---
+title: FAQs
+---
+
+:::caution
+**You are currently viewing the docs for `cva@beta`**  
+For stable documentation, please visit [cva.style](https://cva.style).
+:::
+
+## Why Don't You Provide a `styled` API?
+
+Long story short: it's unnecessary.
+
+`cva` encourages you to think of components as traditional CSS classes:
+
+- Less JavaScript is better
+- They're framework agnostic; truly reusable
+- Polymorphism is free; just apply the class to your preferred HTML element
+- Less opinionated; you're free to build components with `cva` however you'd like
+
+See the ["Polymorphism"](/docs/getting-started/polymorphism) documentation for further recommendations.
+
+## How Can I Create [Responsive Variants like Stitches.js](https://stitches.dev/docs/responsive-styles#responsive-variants)?
+
+You can't.
+
+`cva` doesn't know about how you choose to apply CSS classes, and it doesn't want to.
+
+We recommend either:
+
+- Showing/hiding elements with different variants, based on your preferred breakpoint.
+
+<details>
+
+<summary>Example: With Tailwind</summary>
+
+```tsx
+export const Example = () => (
+  <>
+    <div className="hidden sm:inline-flex">
+      <button className={button({ intent: "primary" })}>Hidden until sm</button>
+    </div>
+    <div className="inline-flex sm:hidden">
+      <button className={button({ intent: "secondary" })}>
+        Hidden after sm
+      </button>
+    </div>
+  </>
+);
+```
+
+</details>
+
+- Create a bespoke variant that changes based on the breakpoint.
+
+  _e.g. `button({ intent: "primaryUntilMd" })`_
+
+:::info
+This is something I've been thinking about since the project's inception, and I've gone back and forth many times on the idea of building it. It's a large undertaking and brings all the complexity of supporting many different build tools and frameworks.
+
+In my experience, "responsive variants" are typically rare, and hiding/showing different elements is usually good enough to get by.
+
+To be frank, I'm probably not going to build/maintain a solution unless someone periodically gives me a thick wad of cash to do so, and even then I'd probably rather spend my free time living my life.
+:::

docs/beta/src/content/docs/getting-started/compound-components.mdx

@@ -2,6 +2,11 @@
 title: Compound Components
 ---
 
+:::caution
+**You are currently viewing the docs for `cva@beta`**  
+For stable documentation, please visit [cva.style](https://cva.style).
+:::
+
 For larger, more complex components, you may end up wanting to create a set of composable components that work together: "Compound Components"
 
 <details>

docs/beta/src/content/docs/getting-started/installation.mdx

@@ -2,7 +2,7 @@
 title: Installation
 ---
 
-import { Tabs, TabItem } from "@astrojs/starlight/components";
+import { Tabs, TabItem, Steps } from "@astrojs/starlight/components";
 
 :::caution
 **You are currently viewing the docs for `cva@beta`**
@@ -50,26 +50,31 @@ You can enable autocompletion inside `cva` using the steps below:
 
 <Tabs>
   <TabItem label="Visual Studio Code">
+    <Steps>
 
     1. [Install the "Tailwind CSS IntelliSense" Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
 
     2. Add the following to your [`.vscode/settings.json`](https://code.visualstudio.com/docs/getstarted/settings):
 
-    ```json
-    {
-      "tailwindCSS.experimental.classRegex": [
-        ["cva\\(([^)]*)\\)", "[\"'`]?([^\"'`]+)[\"'`]?"],
-        ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-      ]
-    }
-    ```
+        ```json
+        // .vscode/settings.json
+        {
+          "tailwindCSS.experimental.classRegex": [
+            ["cva\\(([^)]*)\\)", "[\"'`]?([^\"'`]+)[\"'`]?"],
+            ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+          ]
+        }
+        ```
+
+    </Steps>
 
   </TabItem>
   <TabItem label="Zed">
 
     Add the following to your [`.zed/settings.json`](https://zed.dev/docs/configuring-zed#settings-files):
 
     ```json
+    // .zed/settings.json
     {
       "lsp": {
         "tailwindcss-language-server": {
@@ -88,45 +93,47 @@ You can enable autocompletion inside `cva` using the steps below:
 
   </TabItem>
   <TabItem label="Neovim">
-
+    <Steps>
     1. [Install the extension](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tailwindcss)
 
     2. Add the following configuration:
 
-    ```lua
-    require 'lspconfig'.tailwindcss.setup({
-      settings = {
-        tailwindCSS = {
-          experimental = {
-            classRegex = {
-              { "cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]" },
-              { "cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)" }
+        ```lua
+        require 'lspconfig'.tailwindcss.setup({
+          settings = {
+            tailwindCSS = {
+              experimental = {
+                classRegex = {
+                  { "cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]" },
+                  { "cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)" }
+                },
+              },
             },
           },
-        },
-      },
-    })
-    ```
+        })
+        ```
+    </Steps>
 
   </TabItem>
   <TabItem label="WebStorm">
-
+    <Steps>
     1. Check the version. Available for [WebStorm 2023.1](https://www.jetbrains.com/webstorm/whatsnew/#version-2023-1-tailwind-css-configuration) and later
 
     2. Open the settings. Go to [Languages and Frameworks | Style Sheets | Tailwind CSS](https://www.jetbrains.com/help/webstorm/tailwind-css.html#ws_css_tailwind_configuration)
 
     3. Add the following to your tailwind configuration
 
-    ```json
-    {
-      "experimental": {
-        "classRegex": [
-          ["cva\\(([^)]*)\\)", "[\"'`]?([^\"'`]+)[\"'`]?"],
-          ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-        ]
-      }
-    }
-    ```
+        ```json
+        {
+          "experimental": {
+            "classRegex": [
+              ["cva\\(([^)]*)\\)", "[\"'`]?([^\"'`]+)[\"'`]?"],
+              ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+            ]
+          }
+        }
+        ```
+    </Steps>
 
   </TabItem>
 </Tabs>
@@ -139,7 +146,8 @@ If you want to merge Tailwind CSS classes without conflicts, you may wish to [ro
 
 <summary>Example with tailwind-merge</summary>
 
-```ts filename="cva.config.ts"
+```ts
+// cva.config.ts
 import { defineConfig } from "cva";
 import { twMerge } from "tailwind-merge";
 
@@ -150,7 +158,8 @@ export const { cva, cx, compose } = defineConfig({
 });
 ```
 
-```ts filename="components/button.ts"
+```ts
+// components/button.ts
 import { cx, cva } from "../cva.config";
 
 export const button = cva({