@batijs/cli 0.0.307 → 0.0.308

package/dist/boilerplates/@batijs/react/files/$package.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   OXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/react/dist/files/$package.json.js
@@ -39,6 +39,7 @@ var require_package = __commonJS({
       description: "",
       type: "module",
       scripts: {
+        prepare: "panda codegen --silent",
         "check-types": "tsc --noEmit",
         build: "bati-compile-boilerplate"
       },
@@ -51,6 +52,7 @@ var require_package = __commonJS({
         "@babel/plugin-transform-react-jsx": "^7.25.9",
         "@batijs/compile": "workspace:*",
         "@mantine/core": "^7.14.1",
+        "@pandacss/dev": "^0.47.1",
         "@types/node": "^18.19.64",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",

package/dist/boilerplates/@batijs/react/files/$tsconfig.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   IXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/react/dist/files/$tsconfig.json.js

package/dist/boilerplates/@batijs/react/files/$vite.config.ts.js

@@ -1,15 +1,15 @@
 #!/usr/bin/env node
 import {
   LXs,
-  Tvs
-} from "../../../../chunk-ACADSV35.js";
+  vTs
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/react/dist/files/$vite.config.ts.js
 async function getViteConfig(props) {
   const mod = await LXs(props);
   const reactOptions = props.meta.BATI.has("vercel") && props.meta.BATI.has("hattip") ? { jsxRuntime: "classic" } : {};
-  Tvs(mod, {
+  vTs(mod, {
     from: "@vitejs/plugin-react",
     constructor: "react",
     options: reactOptions

package/dist/boilerplates/@batijs/react/files/layouts/LayoutDefault.tsx

@@ -1,22 +1,25 @@
 import "./style.css";
 //# BATI.has("tailwindcss")
 import "./tailwind.css";
+//# BATI.has("panda-css")
+import "./panda.css";
 import React from "react";
 import logoUrl from "../assets/logo.svg";
 import { Link } from "../components/Link.js";
+import { css } from "../styled-system/css";
 
 export default function LayoutDefault({ children }: { children: React.ReactNode }) {
   return (
     <div
-      //# BATI.has("tailwindcss")
-      className="flex max-w-5xl m-auto"
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      className={BATI.has("tailwindcss") ? "flex max-w-5xl m-auto" : css({ display: "flex", maxW: "900px", m: "auto" })}
       //# BATI.has("compiled-css")
       css={{
         display: "flex",
         maxWidth: 1024,
         margin: "auto",
       }}
-      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css")
+      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css") && !BATI.has("panda-css")
       style={{
         display: "flex",
         maxWidth: 900,
@@ -39,8 +42,19 @@ function Sidebar({ children }: { children: React.ReactNode }) {
   return (
     <div
       id="sidebar"
-      //# BATI.has("tailwindcss")
-      className="p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      className={
+        BATI.has("tailwindcss")
+          ? "p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"
+          : css({
+              p: "20px",
+              display: "flex",
+              flexShrink: 0,
+              flexDir: "column",
+              lineHeight: "1.8em",
+              borderRight: "2px solid #eee",
+            })
+      }
       //# BATI.has("compiled-css")
       css={{
         padding: 20,
@@ -50,7 +64,7 @@ function Sidebar({ children }: { children: React.ReactNode }) {
         lineHeight: "1.8em",
         borderRight: "2px solid #eee",
       }}
-      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css")
+      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css") && !BATI.has("panda-css")
       style={{
         padding: 20,
         flexShrink: 0,
@@ -70,15 +84,15 @@ function Content({ children }: { children: React.ReactNode }) {
     <div id="page-container">
       <div
         id="page-content"
-        //# BATI.has("tailwindcss")
-        className="p-5 pb-12 min-h-screen"
+        //# BATI.has("tailwindcss") || BATI.has("panda-css")
+        className={BATI.has("tailwindcss") ? "p-5 pb-12 min-h-screen" : css({ p: "20px", pb: "50px", minH: "100vh" })}
         //# BATI.has("compiled-css")
         css={{
           padding: 20,
           paddingBottom: 48,
           minHeight: "100vh",
         }}
-        //# !BATI.has("tailwindcss") && !BATI.has("compiled-css")
+        //# !BATI.has("tailwindcss") && !BATI.has("compiled-css") && !BATI.has("panda-css")
         style={{
           padding: 20,
           paddingBottom: 50,
@@ -94,14 +108,14 @@ function Content({ children }: { children: React.ReactNode }) {
 function Logo() {
   return (
     <div
-      //# BATI.has("tailwindcss")
-      className="p-5 mb-2"
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      className={BATI.has("tailwindcss") ? "p-5 mb-2" : css({ p: "20px", mb: "10px" })}
       //# BATI.has("compiled-css")
       css={{
         padding: 20,
         marginBottom: 8,
       }}
-      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css")
+      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css") && !BATI.has("panda-css")
       style={{
         marginTop: 20,
         marginBottom: 10,

package/dist/boilerplates/@batijs/react/files/pages/index/+Page.tsx

@@ -1,12 +1,17 @@
 import React from "react";
 import { Counter } from "./Counter.js";
+import { css } from "../../styled-system/css";
 
 export default function Page() {
   return (
     <>
       <h1
-        //# BATI.has("tailwindcss")
-        className="font-bold text-3xl pb-4"
+        //# BATI.has("tailwindcss") || BATI.has("panda-css")
+        className={
+          BATI.has("tailwindcss")
+            ? "font-bold text-3xl pb-4"
+            : css({ font: "bold 2em sans-serif", marginBlock: "0.67em" })
+        }
         //# BATI.has("compiled-css")
         css={{ fontWeight: "700", fontSize: "1.875rem", paddingBottom: "1rem" }}
       >

package/dist/boilerplates/@batijs/react/files/pages/index/Counter.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { css } from "../../styled-system/css";
 
 export function Counter() {
   const [count, setCount] = useState(0);
@@ -6,8 +7,22 @@ export function Counter() {
   return (
     <button
       type="button"
-      //# BATI.has("tailwindcss")
-      className="inline-block border border-black rounded bg-gray-200 px-2 py-1 text-xs font-medium uppercase leading-normal"
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      className={
+        BATI.has("tailwindcss")
+          ? "inline-block border border-black rounded bg-gray-200 px-2 py-1 text-xs font-medium uppercase leading-normal"
+          : css({
+              display: "inline-block",
+              border: "1px solid black",
+              rounded: "sm",
+              bg: "gray.200",
+              px: 1,
+              py: 0.5,
+              fontSize: 12,
+              fontWeight: 500,
+              lineHeight: "16px",
+            })
+      }
       //# BATI.has("compiled-css")
       css={{
         display: "inline-block",

package/dist/boilerplates/@batijs/react/files/pages/todo/TodoList.tsx

@@ -1,6 +1,7 @@
 import { onNewTodo } from "@batijs/telefunc/pages/todo/TodoList.telefunc";
 import { trpc } from "@batijs/trpc/trpc/client";
 import { client } from "@batijs/ts-rest/ts-rest/client";
+import { css } from "../../styled-system/css";
 import React, { useState } from "react";
 
 export function TodoList({ initialTodoItems }: { initialTodoItems: { text: string }[] }) {
@@ -48,8 +49,55 @@ export function TodoList({ initialTodoItems }: { initialTodoItems: { text: strin
             }
           }}
         >
-          <input type="text" onChange={(ev) => setNewTodo(ev.target.value)} value={newTodo} />{" "}
-          <button type="submit">Add to-do</button>
+          <input
+            type="text"
+            onChange={(ev) => setNewTodo(ev.target.value)}
+            value={newTodo}
+            //# BATI.has("tailwindcss") || BATI.has("panda-css")
+            className={
+              BATI.has("tailwindcss")
+                ? "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto p-2 mr-1 mb-1"
+                : css({
+                    p: 2,
+                    bg: "gray.50",
+                    borderWidth: 1,
+                    borderColor: "gray.300",
+                    color: "gray.900",
+                    fontSize: "sm",
+                    rounded: "md",
+                    width: { base: "full", sm: "auto" },
+                    _focus: { ringColor: "teal.500", borderColor: "teal.500" },
+                    mr: 1,
+                    mb: 1,
+                  })
+            }
+          />
+          <button
+            type="submit"
+            //# BATI.has("tailwindcss") || BATI.has("panda-css")
+            className={
+              BATI.has("tailwindcss")
+                ? "text-white bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto p-2"
+                : css({
+                    color: "white",
+                    bg: { base: "teal.700", _hover: "teal.800" },
+                    _focus: {
+                      ringWidth: 2,
+                      ringColor: "teal.300",
+                      outline: "1px solid transparent",
+                      outlineOffset: "1px",
+                    },
+                    cursor: "pointer",
+                    fontSize: "sm",
+                    fontWeight: 500,
+                    rounded: "md",
+                    width: { base: "full", sm: "auto" },
+                    p: 2,
+                  })
+            }
+          >
+            Add to-do
+          </button>
         </form>
       </div>
     </>

package/dist/boilerplates/@batijs/react/types/layouts/LayoutDefault.d.ts

@@ -1,5 +1,6 @@
 import "./style.css";
 import "./tailwind.css";
+import "./panda.css";
 import React from "react";
 export default function LayoutDefault({ children }: {
     children: React.ReactNode;

package/dist/boilerplates/@batijs/react-sentry/files/$package.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   OXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/react-sentry/dist/files/$package.json.js

package/dist/boilerplates/@batijs/sentry/files/$.env.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   WXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/sentry/dist/files/$.env.js

package/dist/boilerplates/@batijs/sentry/files/$README.md.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   NXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/sentry/dist/files/$README.md.js

package/dist/boilerplates/@batijs/sentry/files/$package.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   OXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/sentry/dist/files/$package.json.js

package/dist/boilerplates/@batijs/sentry/files/$vite.config.ts.js

@@ -1,15 +1,15 @@
 #!/usr/bin/env node
 import {
   LXs,
-  Tvs,
-  eQr
-} from "../../../../chunk-ACADSV35.js";
+  eQr,
+  vTs
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/sentry/dist/files/$vite.config.ts.js
 async function getViteConfig(props) {
   const mod = await LXs(props);
-  Tvs(mod, {
+  vTs(mod, {
     from: "@sentry/vite-plugin",
     constructor: "sentryVitePlugin",
     imported: "sentryVitePlugin",

package/dist/boilerplates/@batijs/sentry/files/pages/$+client.ts.js

@@ -4,7 +4,7 @@ import {
   LXs,
   Use,
   YV
-} from "../../../../../chunk-ACADSV35.js";
+} from "../../../../../chunk-O2DQVJZQ.js";
 import "../../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/sentry/dist/files/pages/$+client.ts.js

package/dist/boilerplates/@batijs/shadcn-ui/files/$README.md.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   NXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/shadcn-ui/dist/files/$README.md.js

package/dist/boilerplates/@batijs/shadcn-ui/files/$package.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   OXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/shadcn-ui/dist/files/$package.json.js

package/dist/boilerplates/@batijs/shadcn-ui/files/$tsconfig.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   IXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/shadcn-ui/dist/files/$tsconfig.json.js

package/dist/boilerplates/@batijs/shadcn-ui/files/$vite.config.ts.js

@@ -2,7 +2,7 @@
 import {
   HXr,
   LXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/shadcn-ui/dist/files/$vite.config.ts.js

package/dist/boilerplates/@batijs/shared/files/$README.md.js

@@ -4,7 +4,7 @@ import {
   NXs,
   iQs,
   sQs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/shared/dist/files/$README.md.js

package/dist/boilerplates/@batijs/shared/files/.gitignore

@@ -140,3 +140,7 @@ dist
 # aws-cdk
 .cdk.staging
 cdk.out
+
+## Panda
+styled-system
+styled-system-studio

package/dist/boilerplates/@batijs/shared/files/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "strict": true,
     "allowJs": true,
-    "checkJs": true,
+    "checkJs": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,

package/dist/boilerplates/@batijs/shared-server/files/$package.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   OXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/shared-server/dist/files/$package.json.js

package/dist/boilerplates/@batijs/solid/files/$README.md.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   NXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/solid/dist/files/$README.md.js

package/dist/boilerplates/@batijs/solid/files/$package.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   OXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/solid/dist/files/$package.json.js
@@ -39,6 +39,7 @@ var require_package = __commonJS({
       description: "",
       type: "module",
       scripts: {
+        prepare: "panda codegen --silent",
         "check-types": "tsc --noEmit",
         build: "bati-compile-boilerplate"
       },
@@ -47,6 +48,7 @@ var require_package = __commonJS({
       license: "MIT",
       devDependencies: {
         "@batijs/compile": "workspace:*",
+        "@pandacss/dev": "^0.47.1",
         "@types/node": "^18.19.64",
         "solid-js": "^1.9.3",
         tailwindcss: "^3.4.15",

package/dist/boilerplates/@batijs/solid/files/$tsconfig.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   IXs
-} from "../../../../chunk-ACADSV35.js";
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/solid/dist/files/$tsconfig.json.js

package/dist/boilerplates/@batijs/solid/files/$vite.config.ts.js

@@ -1,14 +1,14 @@
 #!/usr/bin/env node
 import {
   LXs,
-  Tvs
-} from "../../../../chunk-ACADSV35.js";
+  vTs
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/solid/dist/files/$vite.config.ts.js
 async function getViteConfig(props) {
   const mod = await LXs(props);
-  Tvs(mod, {
+  vTs(mod, {
     from: "vike-solid/vite",
     constructor: "vikeSolid"
   });

package/dist/boilerplates/@batijs/solid/files/layouts/LayoutDefault.tsx

@@ -1,16 +1,19 @@
 import "./style.css";
 //# BATI.has("tailwindcss")
 import "./tailwind.css";
+//# BATI.has("panda-css")
+import "./panda.css";
 import type { JSX } from "solid-js";
 import logoUrl from "../assets/logo.svg";
 import { Link } from "../components/Link.js";
+import { css } from "../styled-system/css";
 
 export default function LayoutDefault(props: { children?: JSX.Element }) {
   return (
     <div
-      //# BATI.has("tailwindcss")
-      class="flex max-w-5xl m-auto"
-      //# !BATI.has("tailwindcss")
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      class={BATI.has("tailwindcss") ? "flex max-w-5xl m-auto" : css({ display: "flex", maxW: "900px", m: "auto" })}
+      //# !BATI.has("tailwindcss") && !BATI.has("panda-css")
       style={{
         display: "flex",
         "max-width": "900px",
@@ -33,9 +36,20 @@ function Sidebar(props: { children: JSX.Element }) {
   return (
     <div
       id="sidebar"
-      //# BATI.has("tailwindcss")
-      class="p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"
-      //# !BATI.has("tailwindcss")
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      class={
+        BATI.has("tailwindcss")
+          ? "p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"
+          : css({
+              p: "20px",
+              display: "flex",
+              flexShrink: 0,
+              flexDir: "column",
+              lineHeight: "1.8em",
+              borderRight: "2px solid #eee",
+            })
+      }
+      //# !BATI.has("tailwindcss") && !BATI.has("panda-css")
       style={{
         padding: "20px",
         "flex-shrink": 0,
@@ -55,9 +69,9 @@ function Content(props: { children: JSX.Element }) {
     <div id="page-container">
       <div
         id="page-content"
-        //# BATI.has("tailwindcss")
-        class="p-5 pb-12 min-h-screen"
-        //# !BATI.has("tailwindcss")
+        //# BATI.has("tailwindcss") || BATI.has("panda-css")
+        class={BATI.has("tailwindcss") ? "p-5 pb-12 min-h-screen" : css({ p: "20px", pb: "50px", minH: "100vh" })}
+        //# !BATI.has("tailwindcss") && !BATI.has("panda-css")
         style={{
           padding: "20px",
           "padding-bottom": "50px",
@@ -73,9 +87,9 @@ function Content(props: { children: JSX.Element }) {
 function Logo() {
   return (
     <div
-      //# BATI.has("tailwindcss")
-      class="p-5 mb-2"
-      //# !BATI.has("tailwindcss")
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      class={BATI.has("tailwindcss") ? "p-5 mb-2" : css({ p: "20px", mb: "10px" })}
+      //# !BATI.has("tailwindcss") && !BATI.has("panda-css")
       style={{
         "margin-top": "20px",
         "margin-bottom": "10px",

package/dist/boilerplates/@batijs/solid/files/pages/index/+Page.tsx

@@ -1,11 +1,16 @@
 import { Counter } from "./Counter.js";
+import { css } from "../../styled-system/css";
 
 export default function Page() {
   return (
     <>
       <h1
-        //# BATI.has("tailwindcss")
-        class="font-bold text-3xl pb-4"
+        //# BATI.has("tailwindcss") || BATI.has("panda-css")
+        class={
+          BATI.has("tailwindcss")
+            ? "font-bold text-3xl pb-4"
+            : css({ font: "bold 2em sans-serif", marginBlock: "0.67em" })
+        }
       >
         My Vike app
       </h1>

package/dist/boilerplates/@batijs/solid/files/pages/index/Counter.tsx

@@ -1,4 +1,5 @@
 import { createSignal } from "solid-js";
+import { css } from "../../styled-system/css";
 
 export { Counter };
 
@@ -8,8 +9,22 @@ function Counter() {
   return (
     <button
       type="button"
-      //# BATI.has("tailwindcss")
-      class="inline-block border border-black rounded bg-gray-200 px-2 py-1 text-xs font-medium uppercase leading-normal"
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      class={
+        BATI.has("tailwindcss")
+          ? "inline-block border border-black rounded bg-gray-200 px-2 py-1 text-xs font-medium uppercase leading-normal"
+          : css({
+              display: "inline-block",
+              border: "1px solid black",
+              rounded: "sm",
+              bg: "gray.200",
+              px: 1,
+              py: 0.5,
+              fontSize: 12,
+              fontWeight: 500,
+              lineHeight: "16px",
+            })
+      }
       onClick={() => setCount((count) => count + 1)}
     >
       Counter {count()}