qstd 0.3.4 → 0.3.5

package/README.md

@@ -20,6 +20,30 @@ A single npm package providing:
 pnpm add qstd
 ```
 
+## ⚠️ Required: Panda CSS Preset Setup
+
+**If you're using the Block component, you MUST configure the qstd preset in your `panda.config.ts`:**
+
+```ts
+// panda.config.ts
+import { defineConfig } from "@pandacss/dev";
+import qstdPreset from "qstd/preset";
+
+export default defineConfig({
+  presets: ["@pandacss/dev/presets", qstdPreset], // ← REQUIRED
+  include: ["./src/**/*.{ts,tsx}"],
+  outdir: "styled-system",
+  jsxFramework: "react", // ← REQUIRED for Block component
+});
+```
+
+**Without this setup:**
+- Props like `grid`, `flex`, `cols`, `rows` will output broken CSS (e.g., `grid_true` instead of `display: grid`)
+- Boolean utilities (`alignI`, `justifyC`, etc.) won't transform correctly
+- You'll see raw prop values in your HTML class names instead of actual styles
+
+After adding the preset, run `pnpm panda codegen` to regenerate your styled-system.
+
 ## Prerequisites
 
 ### TypeScript Configuration (Required)

package/dist/block/fns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fns.d.ts","sourceRoot":"","sources":["../../src/block/fns.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"fns.d.ts","sourceRoot":"","sources":["../../src/block/fns.tsx"],"names":[],"mappings":"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"}

package/dist/react/index.cjs

@@ -1056,8 +1056,10 @@ var extractElAndStyles = (extract, anyProps) => {
     custom,
     ...rest
   } = anyProps;
-  const StdComp = tags[extract.el] || tags.div;
-  const MotionComp = motionTags[extract.el] || motionTags.div;
+  const asTag = anyProps.as;
+  const effectiveEl = asTag && asTag in tags ? asTag : extract.el;
+  const StdComp = tags[effectiveEl] || tags.div;
+  const MotionComp = motionTags[effectiveEl] || motionTags.div;
   const hasMotionProps = _motion !== void 0 || layout !== void 0 || initial !== void 0 || animate !== void 0 || exit !== void 0 || whileHover !== void 0 || whileTap !== void 0 || whileFocus !== void 0 || variants !== void 0 || transition !== void 0 || custom !== void 0;
   const comp = hasMotionProps ? MotionComp : StdComp;
   const motionProps = hasMotionProps ? {
@@ -1072,12 +1074,16 @@ var extractElAndStyles = (extract, anyProps) => {
     custom,
     transition: _motion ?? transition
   } : void 0;
-  const remaining = omit(rest, [
+  const propsToOmit = [
     "loadingPosition",
     "loadingIcon",
     "isLoading",
     "children"
-  ]);
+  ];
+  if (asTag && asTag in tags) {
+    propsToOmit.push("as");
+  }
+  const remaining = omit(rest, propsToOmit);
   const cursor = anyProps.isLoading ? "not-allowed" : "pointer";
   const btnClassName = extract.is === "btn" ? css({ display: "flex", alignI: "center", cursor }) : "";
   const linkClassName = extract.isLink ? css({

package/dist/react/index.js

@@ -1033,8 +1033,10 @@ var extractElAndStyles = (extract, anyProps) => {
     custom,
     ...rest
   } = anyProps;
-  const StdComp = tags[extract.el] || tags.div;
-  const MotionComp = motionTags[extract.el] || motionTags.div;
+  const asTag = anyProps.as;
+  const effectiveEl = asTag && asTag in tags ? asTag : extract.el;
+  const StdComp = tags[effectiveEl] || tags.div;
+  const MotionComp = motionTags[effectiveEl] || motionTags.div;
   const hasMotionProps = _motion !== void 0 || layout !== void 0 || initial !== void 0 || animate !== void 0 || exit !== void 0 || whileHover !== void 0 || whileTap !== void 0 || whileFocus !== void 0 || variants !== void 0 || transition !== void 0 || custom !== void 0;
   const comp = hasMotionProps ? MotionComp : StdComp;
   const motionProps = hasMotionProps ? {
@@ -1049,12 +1051,16 @@ var extractElAndStyles = (extract, anyProps) => {
     custom,
     transition: _motion ?? transition
   } : void 0;
-  const remaining = omit(rest, [
+  const propsToOmit = [
     "loadingPosition",
     "loadingIcon",
     "isLoading",
     "children"
-  ]);
+  ];
+  if (asTag && asTag in tags) {
+    propsToOmit.push("as");
+  }
+  const remaining = omit(rest, propsToOmit);
   const cursor = anyProps.isLoading ? "not-allowed" : "pointer";
   const btnClassName = extract.is === "btn" ? css({ display: "flex", alignI: "center", cursor }) : "";
   const linkClassName = extract.isLink ? css({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qstd",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",