qstd 0.3.4 → 0.3.7

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/drawer.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import * as _t from "./types";
-declare const MotionDiv: import("../../styled-system/types").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, {}>;
-declare const MotionBtn: import("../../styled-system/types").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, {}>;
+declare const MotionDiv: any;
+declare const MotionBtn: any;
 export default function Drawer(props: _t.DrawerBlockProps): import("react/jsx-runtime").JSX.Element;
 export declare function BtnGroup(props: React.ComponentProps<typeof MotionDiv>): import("react/jsx-runtime").JSX.Element;
 export declare function CloseBtn(props: React.ComponentProps<typeof MotionBtn>): import("react/jsx-runtime").JSX.Element | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAE9B,QAAA,MAAM,SAAS,sKAAoB,CAAC;AACpC,QAAA,MAAM,SAAS,4KAAuB,CAAC;AAmWvC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAYrE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,uDAkDrE"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAE9B,QAAA,MAAM,SAAS,KAAoB,CAAC;AACpC,QAAA,MAAM,SAAS,KAAuB,CAAC;AAmWvC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAYrE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,uDAkDrE"}

package/dist/block/fns.d.ts

@@ -45,7 +45,7 @@ export declare const extractElType: (is: _t.Is, props: {
     isDrawer: boolean;
     isHr: boolean;
 };
-export declare const extractElAndStyles: (extract: ReturnType<typeof extractElType>, anyProps: InternalBlockProps) => readonly [React.FunctionComponent<any>, {
+export declare const extractElAndStyles: (extract: ReturnType<typeof extractElType>, anyProps: InternalBlockProps) => readonly [React.ElementType<any, keyof React.JSX.IntrinsicElements>, {
     readonly className: string;
     readonly tooltip?: React.ReactNode | string;
     readonly portalContainer?: Element | DocumentFragment;
@@ -782,7 +782,7 @@ export declare const extractElAndStyles: (extract: ReturnType<typeof extractElTy
     readonly mr?: import("../../styled-system/types").ConditionalValue<import("../../styled-system/types/prop-type").UtilityValues["marginRight"] | import("../../styled-system/types").CssVars | import("../../styled-system/types").CssProperties["marginRight"] | import("../../styled-system/types").AnyString>;
     readonly mt?: import("../../styled-system/types").ConditionalValue<import("../../styled-system/types/prop-type").UtilityValues["marginTop"] | import("../../styled-system/types").CssVars | import("../../styled-system/types").CssProperties["marginTop"] | import("../../styled-system/types").AnyString>;
     readonly mb?: import("../../styled-system/types").ConditionalValue<import("../../styled-system/types/prop-type").UtilityValues["marginBottom"] | import("../../styled-system/types").CssVars | import("../../styled-system/types").CssProperties["marginBottom"] | import("../../styled-system/types").AnyString>;
-    readonly m: 0 | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | import("../../styled-system/types").AnyString | "initial" | "inherit" | "auto" | import("../../styled-system/types").Number | "-moz-initial" | "revert" | "revert-layer" | "unset" | readonly NonNullable<import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | undefined>[] | (import("../../styled-system/tokens").SpacingToken | import("../../styled-system/types").AnyString | `var(--${string})` | import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | readonly NonNullable<import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | undefined>[] | null | undefined)[] | {
+    readonly m: 0 | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | import("../../styled-system/types").AnyString | "initial" | "inherit" | import("../../styled-system/types").Number | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | readonly NonNullable<import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | undefined>[] | (import("../../styled-system/tokens").SpacingToken | import("../../styled-system/types").AnyString | `var(--${string})` | import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | readonly NonNullable<import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | undefined>[] | null | undefined)[] | {
         _hover?: import("../../styled-system/types").ConditionalValue<import("../../styled-system/tokens").SpacingToken | import("../../styled-system/types").AnyString | `var(--${string})` | import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | readonly NonNullable<import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | undefined>[] | undefined>;
         _focus?: import("../../styled-system/types").ConditionalValue<import("../../styled-system/tokens").SpacingToken | import("../../styled-system/types").AnyString | `var(--${string})` | import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | readonly NonNullable<import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | undefined>[] | undefined>;
         _focusWithin?: import("../../styled-system/types").ConditionalValue<import("../../styled-system/tokens").SpacingToken | import("../../styled-system/types").AnyString | `var(--${string})` | import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | readonly NonNullable<import("../../styled-system/types/csstype").Property.Margin<import("../../styled-system/types").String | import("../../styled-system/types").Number> | undefined>[] | undefined>;

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/block/literals.d.ts

@@ -56,59 +56,59 @@ export declare const tags: {
     readonly pre: import("panda/jsx").StyledComponent<"pre", {}>;
 };
 export declare const motionTags: {
-    readonly div: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, {}>;
-    readonly a: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLAnchorElement, import("framer-motion").HTMLMotionProps<"a">>, {}>;
-    readonly br: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLBRElement, import("framer-motion").HTMLMotionProps<"br">>, {}>;
-    readonly button: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, {}>;
-    readonly canvas: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLCanvasElement, import("framer-motion").HTMLMotionProps<"canvas">>, {}>;
-    readonly form: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLFormElement, import("framer-motion").HTMLMotionProps<"form">>, {}>;
-    readonly h1: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLHeadingElement, import("framer-motion").HTMLMotionProps<"h1">>, {}>;
-    readonly h2: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLHeadingElement, import("framer-motion").HTMLMotionProps<"h2">>, {}>;
-    readonly h3: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLHeadingElement, import("framer-motion").HTMLMotionProps<"h3">>, {}>;
-    readonly hr: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLHRElement, import("framer-motion").HTMLMotionProps<"hr">>, {}>;
-    readonly nav: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"nav">>, {}>;
-    readonly main: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"main">>, {}>;
-    readonly aside: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"aside">>, {}>;
-    readonly article: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"article">>, {}>;
-    readonly section: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"section">>, {}>;
-    readonly details: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDetailsElement, import("framer-motion").HTMLMotionProps<"details">>, {}>;
-    readonly header: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"header">>, {}>;
-    readonly footer: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"footer">>, {}>;
-    readonly strong: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"strong">>, {}>;
-    readonly em: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"em">>, {}>;
-    readonly img: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLImageElement, import("framer-motion").HTMLMotionProps<"img">>, {}>;
-    readonly del: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLModElement, import("framer-motion").HTMLMotionProps<"del">>, {}>;
-    readonly ins: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLModElement, import("framer-motion").HTMLMotionProps<"ins">>, {}>;
-    readonly kbd: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"kbd">>, {}>;
-    readonly code: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"code">>, {}>;
-    readonly mark: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"mark">>, {}>;
-    readonly samp: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"samp">>, {}>;
-    readonly small: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"small">>, {}>;
-    readonly sub: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"sub">>, {}>;
-    readonly sup: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"sup">>, {}>;
-    readonly u: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"u">>, {}>;
-    readonly var: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"var">>, {}>;
-    readonly input: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLInputElement, import("framer-motion").HTMLMotionProps<"input">>, {}>;
-    readonly label: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, {}>;
-    readonly legend: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLegendElement, import("framer-motion").HTMLMotionProps<"legend">>, {}>;
-    readonly p: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLParagraphElement, import("framer-motion").HTMLMotionProps<"p">>, {}>;
-    readonly select: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLSelectElement, import("framer-motion").HTMLMotionProps<"select">>, {}>;
-    readonly span: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLSpanElement, import("framer-motion").HTMLMotionProps<"span">>, {}>;
-    readonly svg: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<SVGSVGElement, import("framer-motion").SVGMotionProps<SVGSVGElement>>, {}>;
-    readonly textarea: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLTextAreaElement, import("framer-motion").HTMLMotionProps<"textarea">>, {}>;
-    readonly table: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLTableElement, import("framer-motion").HTMLMotionProps<"table">>, {}>;
-    readonly tr: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLTableRowElement, import("framer-motion").HTMLMotionProps<"tr">>, {}>;
-    readonly th: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLTableHeaderCellElement, import("framer-motion").HTMLMotionProps<"th">>, {}>;
-    readonly td: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLTableDataCellElement, import("framer-motion").HTMLMotionProps<"td">>, {}>;
-    readonly tbody: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLTableSectionElement, import("framer-motion").HTMLMotionProps<"tbody">>, {}>;
-    readonly thead: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLTableSectionElement, import("framer-motion").HTMLMotionProps<"thead">>, {}>;
-    readonly tfoot: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLTableSectionElement, import("framer-motion").HTMLMotionProps<"tfoot">>, {}>;
-    readonly progress: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLProgressElement, import("framer-motion").HTMLMotionProps<"progress">>, {}>;
-    readonly ol: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLOListElement, import("framer-motion").HTMLMotionProps<"ol">>, {}>;
-    readonly ul: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLUListElement, import("framer-motion").HTMLMotionProps<"ul">>, {}>;
-    readonly li: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLIElement, import("framer-motion").HTMLMotionProps<"li">>, {}>;
-    readonly blockquote: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLQuoteElement, import("framer-motion").HTMLMotionProps<"blockquote">>, {}>;
-    readonly pre: import("panda/jsx").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLPreElement, import("framer-motion").HTMLMotionProps<"pre">>, {}>;
+    readonly div: any;
+    readonly a: any;
+    readonly br: any;
+    readonly button: any;
+    readonly canvas: any;
+    readonly form: any;
+    readonly h1: any;
+    readonly h2: any;
+    readonly h3: any;
+    readonly hr: any;
+    readonly nav: any;
+    readonly main: any;
+    readonly aside: any;
+    readonly article: any;
+    readonly section: any;
+    readonly details: any;
+    readonly header: any;
+    readonly footer: any;
+    readonly strong: any;
+    readonly em: any;
+    readonly img: any;
+    readonly del: any;
+    readonly ins: any;
+    readonly kbd: any;
+    readonly code: any;
+    readonly mark: any;
+    readonly samp: any;
+    readonly small: any;
+    readonly sub: any;
+    readonly sup: any;
+    readonly u: any;
+    readonly var: any;
+    readonly input: any;
+    readonly label: any;
+    readonly legend: any;
+    readonly p: any;
+    readonly select: any;
+    readonly span: any;
+    readonly svg: any;
+    readonly textarea: any;
+    readonly table: any;
+    readonly tr: any;
+    readonly th: any;
+    readonly td: any;
+    readonly tbody: any;
+    readonly thead: any;
+    readonly tfoot: any;
+    readonly progress: any;
+    readonly ol: any;
+    readonly ul: any;
+    readonly li: any;
+    readonly blockquote: any;
+    readonly pre: any;
 };
 export declare const loadingIconsMap: {
     readonly rotatingLines: import("react").FunctionComponent<import("react-loader-spinner")._Props3>;

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

@@ -1 +1 @@
-{"version":3,"file":"literals.d.ts","sourceRoot":"","sources":["../../src/block/literals.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAM5C,eAAO,MAAM,IAAI,gDAAgB,CAAC;AAElC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDP,CAAC;AAUX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDmC,CAAC;AAE3D,eAAO,MAAM,eAAe;;;;;;CAMlB,CAAC;AAEX,eAAO,MAAM,YAAY,UAA+B,CAAC"}
+{"version":3,"file":"literals.d.ts","sourceRoot":"","sources":["../../src/block/literals.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAM5C,eAAO,MAAM,IAAI,gDAAgB,CAAC;AAElC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDP,CAAC;AAcX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDmC,CAAC;AAE3D,eAAO,MAAM,eAAe;;;;;;CAMlB,CAAC;AAEX,eAAO,MAAM,YAAY,UAA+B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/block/menu.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAQ9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,2CAOrD;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,2CA2TpD"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/block/menu.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAQ9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,2CAOrD;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,2CA0TpD"}

package/dist/react/index.cjs

@@ -553,60 +553,61 @@ var tags = {
   blockquote: styled("blockquote"),
   pre: styled("pre")
 };
+var motionStyled = (tag) => framerMotion.motion(styled(tag));
 var motionTags = {
-  div: styled(framerMotion.motion.div),
-  a: styled(framerMotion.motion.a),
-  br: styled(framerMotion.motion.br),
-  button: styled(framerMotion.motion.button),
-  canvas: styled(framerMotion.motion.canvas),
-  form: styled(framerMotion.motion.form),
-  h1: styled(framerMotion.motion.h1),
-  h2: styled(framerMotion.motion.h2),
-  h3: styled(framerMotion.motion.h3),
-  hr: styled(framerMotion.motion.hr),
-  nav: styled(framerMotion.motion.nav),
-  main: styled(framerMotion.motion.main),
-  aside: styled(framerMotion.motion.aside),
-  article: styled(framerMotion.motion.article),
-  section: styled(framerMotion.motion.section),
-  details: styled(framerMotion.motion.details),
-  header: styled(framerMotion.motion.header),
-  footer: styled(framerMotion.motion.footer),
-  strong: styled(framerMotion.motion.strong),
-  em: styled(framerMotion.motion.em),
-  img: styled(framerMotion.motion.img),
-  del: styled(framerMotion.motion.del),
-  ins: styled(framerMotion.motion.ins),
-  kbd: styled(framerMotion.motion.kbd),
-  code: styled(framerMotion.motion.code),
-  mark: styled(framerMotion.motion.mark),
-  samp: styled(framerMotion.motion.samp),
-  small: styled(framerMotion.motion.small),
-  sub: styled(framerMotion.motion.sub),
-  sup: styled(framerMotion.motion.sup),
-  u: styled(framerMotion.motion.u),
-  var: styled(framerMotion.motion.var),
-  input: styled(framerMotion.motion.input),
-  label: styled(framerMotion.motion.label),
-  legend: styled(framerMotion.motion.legend),
-  p: styled(framerMotion.motion.p),
-  select: styled(framerMotion.motion.select),
-  span: styled(framerMotion.motion.span),
-  svg: styled(framerMotion.motion.svg),
-  textarea: styled(framerMotion.motion.textarea),
-  table: styled(framerMotion.motion.table),
-  tr: styled(framerMotion.motion.tr),
-  th: styled(framerMotion.motion.th),
-  td: styled(framerMotion.motion.td),
-  tbody: styled(framerMotion.motion.tbody),
-  thead: styled(framerMotion.motion.thead),
-  tfoot: styled(framerMotion.motion.tfoot),
-  progress: styled(framerMotion.motion.progress),
-  ol: styled(framerMotion.motion.ol),
-  ul: styled(framerMotion.motion.ul),
-  li: styled(framerMotion.motion.li),
-  blockquote: styled(framerMotion.motion.blockquote),
-  pre: styled(framerMotion.motion.pre)
+  div: motionStyled("div"),
+  a: motionStyled("a"),
+  br: motionStyled("br"),
+  button: motionStyled("button"),
+  canvas: motionStyled("canvas"),
+  form: motionStyled("form"),
+  h1: motionStyled("h1"),
+  h2: motionStyled("h2"),
+  h3: motionStyled("h3"),
+  hr: motionStyled("hr"),
+  nav: motionStyled("nav"),
+  main: motionStyled("main"),
+  aside: motionStyled("aside"),
+  article: motionStyled("article"),
+  section: motionStyled("section"),
+  details: motionStyled("details"),
+  header: motionStyled("header"),
+  footer: motionStyled("footer"),
+  strong: motionStyled("strong"),
+  em: motionStyled("em"),
+  img: motionStyled("img"),
+  del: motionStyled("del"),
+  ins: motionStyled("ins"),
+  kbd: motionStyled("kbd"),
+  code: motionStyled("code"),
+  mark: motionStyled("mark"),
+  samp: motionStyled("samp"),
+  small: motionStyled("small"),
+  sub: motionStyled("sub"),
+  sup: motionStyled("sup"),
+  u: motionStyled("u"),
+  var: motionStyled("var"),
+  input: motionStyled("input"),
+  label: motionStyled("label"),
+  legend: motionStyled("legend"),
+  p: motionStyled("p"),
+  select: motionStyled("select"),
+  span: motionStyled("span"),
+  svg: motionStyled("svg"),
+  textarea: motionStyled("textarea"),
+  table: motionStyled("table"),
+  tr: motionStyled("tr"),
+  th: motionStyled("th"),
+  td: motionStyled("td"),
+  tbody: motionStyled("tbody"),
+  thead: motionStyled("thead"),
+  tfoot: motionStyled("tfoot"),
+  progress: motionStyled("progress"),
+  ol: motionStyled("ol"),
+  ul: motionStyled("ul"),
+  li: motionStyled("li"),
+  blockquote: motionStyled("blockquote"),
+  pre: motionStyled("pre")
 };
 var loadingIconsMap = {
   rotatingLines: reactLoaderSpinner.RotatingLines,
@@ -1056,8 +1057,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 +1075,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

@@ -530,60 +530,61 @@ var tags = {
   blockquote: styled("blockquote"),
   pre: styled("pre")
 };
+var motionStyled = (tag) => motion(styled(tag));
 var motionTags = {
-  div: styled(motion.div),
-  a: styled(motion.a),
-  br: styled(motion.br),
-  button: styled(motion.button),
-  canvas: styled(motion.canvas),
-  form: styled(motion.form),
-  h1: styled(motion.h1),
-  h2: styled(motion.h2),
-  h3: styled(motion.h3),
-  hr: styled(motion.hr),
-  nav: styled(motion.nav),
-  main: styled(motion.main),
-  aside: styled(motion.aside),
-  article: styled(motion.article),
-  section: styled(motion.section),
-  details: styled(motion.details),
-  header: styled(motion.header),
-  footer: styled(motion.footer),
-  strong: styled(motion.strong),
-  em: styled(motion.em),
-  img: styled(motion.img),
-  del: styled(motion.del),
-  ins: styled(motion.ins),
-  kbd: styled(motion.kbd),
-  code: styled(motion.code),
-  mark: styled(motion.mark),
-  samp: styled(motion.samp),
-  small: styled(motion.small),
-  sub: styled(motion.sub),
-  sup: styled(motion.sup),
-  u: styled(motion.u),
-  var: styled(motion.var),
-  input: styled(motion.input),
-  label: styled(motion.label),
-  legend: styled(motion.legend),
-  p: styled(motion.p),
-  select: styled(motion.select),
-  span: styled(motion.span),
-  svg: styled(motion.svg),
-  textarea: styled(motion.textarea),
-  table: styled(motion.table),
-  tr: styled(motion.tr),
-  th: styled(motion.th),
-  td: styled(motion.td),
-  tbody: styled(motion.tbody),
-  thead: styled(motion.thead),
-  tfoot: styled(motion.tfoot),
-  progress: styled(motion.progress),
-  ol: styled(motion.ol),
-  ul: styled(motion.ul),
-  li: styled(motion.li),
-  blockquote: styled(motion.blockquote),
-  pre: styled(motion.pre)
+  div: motionStyled("div"),
+  a: motionStyled("a"),
+  br: motionStyled("br"),
+  button: motionStyled("button"),
+  canvas: motionStyled("canvas"),
+  form: motionStyled("form"),
+  h1: motionStyled("h1"),
+  h2: motionStyled("h2"),
+  h3: motionStyled("h3"),
+  hr: motionStyled("hr"),
+  nav: motionStyled("nav"),
+  main: motionStyled("main"),
+  aside: motionStyled("aside"),
+  article: motionStyled("article"),
+  section: motionStyled("section"),
+  details: motionStyled("details"),
+  header: motionStyled("header"),
+  footer: motionStyled("footer"),
+  strong: motionStyled("strong"),
+  em: motionStyled("em"),
+  img: motionStyled("img"),
+  del: motionStyled("del"),
+  ins: motionStyled("ins"),
+  kbd: motionStyled("kbd"),
+  code: motionStyled("code"),
+  mark: motionStyled("mark"),
+  samp: motionStyled("samp"),
+  small: motionStyled("small"),
+  sub: motionStyled("sub"),
+  sup: motionStyled("sup"),
+  u: motionStyled("u"),
+  var: motionStyled("var"),
+  input: motionStyled("input"),
+  label: motionStyled("label"),
+  legend: motionStyled("legend"),
+  p: motionStyled("p"),
+  select: motionStyled("select"),
+  span: motionStyled("span"),
+  svg: motionStyled("svg"),
+  textarea: motionStyled("textarea"),
+  table: motionStyled("table"),
+  tr: motionStyled("tr"),
+  th: motionStyled("th"),
+  td: motionStyled("td"),
+  tbody: motionStyled("tbody"),
+  thead: motionStyled("thead"),
+  tfoot: motionStyled("tfoot"),
+  progress: motionStyled("progress"),
+  ol: motionStyled("ol"),
+  ul: motionStyled("ul"),
+  li: motionStyled("li"),
+  blockquote: motionStyled("blockquote"),
+  pre: motionStyled("pre")
 };
 var loadingIconsMap = {
   rotatingLines: RotatingLines,
@@ -1033,8 +1034,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 +1052,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.7",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",