qstd 0.3.3 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -20,6 +20,30 @@ A single npm package providing:
20
20
  pnpm add qstd
21
21
  ```
22
22
 
23
+ ## ⚠️ Required: Panda CSS Preset Setup
24
+
25
+ **If you're using the Block component, you MUST configure the qstd preset in your `panda.config.ts`:**
26
+
27
+ ```ts
28
+ // panda.config.ts
29
+ import { defineConfig } from "@pandacss/dev";
30
+ import qstdPreset from "qstd/preset";
31
+
32
+ export default defineConfig({
33
+ presets: ["@pandacss/dev/presets", qstdPreset], // ← REQUIRED
34
+ include: ["./src/**/*.{ts,tsx}"],
35
+ outdir: "styled-system",
36
+ jsxFramework: "react", // ← REQUIRED for Block component
37
+ });
38
+ ```
39
+
40
+ **Without this setup:**
41
+ - Props like `grid`, `flex`, `cols`, `rows` will output broken CSS (e.g., `grid_true` instead of `display: grid`)
42
+ - Boolean utilities (`alignI`, `justifyC`, etc.) won't transform correctly
43
+ - You'll see raw prop values in your HTML class names instead of actual styles
44
+
45
+ After adding the preset, run `pnpm panda codegen` to regenerate your styled-system.
46
+
23
47
  ## Prerequisites
24
48
 
25
49
  ### TypeScript Configuration (Required)