@batijs/cli 0.0.307 → 0.0.308

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

@@ -2,6 +2,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 { createSignal, For, untrack } from "solid-js";
+import { css } from "../../styled-system/css";
 
 export function TodoList(props: { initialTodoItems: { text: string }[] }) {
   const [todoItems, setTodoItems] = createSignal(props.initialTodoItems);
@@ -45,8 +46,55 @@ export function TodoList(props: { initialTodoItems: { text: string }[] }) {
             }
           }}
         >
-          <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")
+            class={
+              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")
+            class={
+              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/solid/types/layouts/LayoutDefault.d.ts

@@ -1,5 +1,6 @@
 import "./style.css";
 import "./tailwind.css";
+import "./panda.css";
 import type { JSX } from "solid-js";
 export default function LayoutDefault(props: {
     children?: JSX.Element;

package/dist/boilerplates/@batijs/solid-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/solid-sentry/dist/files/$package.json.js

package/dist/boilerplates/@batijs/sqlite/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/sqlite/dist/files/$.env.js

package/dist/boilerplates/@batijs/sqlite/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/sqlite/dist/files/$README.md.js

package/dist/boilerplates/@batijs/sqlite/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/sqlite/dist/files/$package.json.js

package/dist/boilerplates/@batijs/tailwindcss/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/tailwindcss/dist/files/$package.json.js

package/dist/boilerplates/@batijs/telefunc/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/telefunc/dist/files/$package.json.js

package/dist/boilerplates/@batijs/telefunc/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/telefunc/dist/files/$vite.config.ts.js
 async function getViteConfig(props) {
   const mod = await LXs(props);
-  Tvs(mod, {
+  vTs(mod, {
     from: "telefunc/vite",
     constructor: "telefunc",
     imported: "telefunc"

package/dist/boilerplates/@batijs/trpc/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/trpc/dist/files/$package.json.js

package/dist/boilerplates/@batijs/ts-rest/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/ts-rest/dist/files/$package.json.js

package/dist/boilerplates/@batijs/vercel/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/vercel/dist/files/$package.json.js

package/dist/boilerplates/@batijs/vercel/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/vercel/dist/files/$tsconfig.json.js

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

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 import {
   LXs,
-  Tvs
-} from "../../../../chunk-ACADSV35.js";
+  vTs
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/vercel/dist/files/$vite.config.ts.js
@@ -11,7 +11,7 @@ async function getViteConfig(props) {
   const options = props.meta.BATI.has("express") || props.meta.BATI.has("fastify") ? {
     source: "/.*"
   } : void 0;
-  Tvs(mod, {
+  vTs(mod, {
     from: "vite-plugin-vercel",
     constructor: "vercel",
     options

package/dist/boilerplates/@batijs/vue/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/vue/dist/files/$README.md.js

package/dist/boilerplates/@batijs/vue/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/vue/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",
         "@vitejs/plugin-vue": "^5.2.0",
         "@vue/compiler-sfc": "^3.5.13",

package/dist/boilerplates/@batijs/vue/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/vue/dist/files/$tsconfig.json.js

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

@@ -1,21 +1,21 @@
 #!/usr/bin/env node
 import {
   LXs,
-  Tvs
-} from "../../../../chunk-ACADSV35.js";
+  vTs
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/vue/dist/files/$vite.config.ts.js
 async function getViteConfig(props) {
   const mod = await LXs(props);
-  Tvs(mod, {
+  vTs(mod, {
     from: "@vitejs/plugin-vue",
     constructor: "vue",
     options: {
       include: [/\.vue$/, /\.md$/]
     }
   });
-  Tvs(mod, {
+  vTs(mod, {
     from: "unplugin-vue-markdown/vite",
     constructor: "md",
     options: {}

package/dist/boilerplates/@batijs/vue/files/components/Content.vue

@@ -4,14 +4,20 @@
     <div id="page-content" class="p-5 pb-12 min-h-screen">
       <slot />
     </div>
-    <!-- !BATI.has("tailwindcss") -->
+    <!-- BATI.has("panda-css") -->
+    <div id="page-content" :class="css({ p: '20px', pb: '50px', minH: '100vh' })">
+      <slot />
+    </div>
+    <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
     <div id="page-content" style="padding: 20px; padding-bottom: 50px; min-height: 100vh">
       <slot />
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { css } from "../styled-system/css";
+</script>
 
 <style>
 /* Page Transition Animation */

package/dist/boilerplates/@batijs/vue/files/components/Counter.vue

@@ -7,19 +7,33 @@
   >
     Counter {{ state.count }}
   </button>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <button
+    type="button"
+    :class="
+      css({
+        display: 'inline-block',
+        border: '1px solid black',
+        rounded: 'sm',
+        bg: 'gray.200',
+        px: 1,
+        py: 0.5,
+        fontSize: 12,
+        fontWeight: 500,
+        lineHeight: '16px',
+      })
+    "
+    @click="state.count++"
+  >
+    Counter {{ state.count }}
+  </button>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <button type="button" @click="state.count++">Counter {{ state.count }}</button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive } from "vue";
+import { css } from "../styled-system/css";
 
-export default {
-  setup() {
-    const state = reactive({ count: 0 });
-    return {
-      state,
-    };
-  },
-};
+const state = reactive({ count: 0 });
 </script>

package/dist/boilerplates/@batijs/vue/files/components/Logo.vue

@@ -5,11 +5,19 @@
       <img src="../assets/logo.svg" height="64" width="64" />
     </a>
   </div>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <div :class="css({ p: '20px', mb: '10px' })">
+    <a href="/">
+      <img src="../assets/logo.svg" height="64" width="64" />
+    </a>
+  </div>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <div style="margin-top: 20px; margin-bottom: 10px">
     <a href="/">
       <img src="../assets/logo.svg" height="64" width="64" />
     </a>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { css } from "../styled-system/css";
+</script>

package/dist/boilerplates/@batijs/vue/files/components/Sidebar.vue

@@ -3,7 +3,23 @@
   <div id="sidebar" class="p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200">
     <slot />
   </div>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <div
+    id="sidebar"
+    :class="
+      css({
+        p: '20px',
+        display: 'flex',
+        flexShrink: 0,
+        flexDir: 'column',
+        lineHeight: '1.8em',
+        borderRight: '2px solid #eee',
+      })
+    "
+  >
+    <slot />
+  </div>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <div
     id="sidebar"
     style="
@@ -18,4 +34,6 @@
     <slot />
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { css } from "../styled-system/css";
+</script>

package/dist/boilerplates/@batijs/vue/files/layouts/LayoutDefault.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script lang="ts" setup>
+//# BATI.has("panda-css")
+import "./panda.css";
 import Content from "../components/Content.vue";
 import Link from "../components/Link.vue";
 import Logo from "../components/Logo.vue";

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

@@ -1,7 +1,9 @@
 <template>
   <!-- BATI.has("tailwindcss") -->
   <h1 class="font-bold text-3xl pb-4">My Vike app</h1>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <h1 :class="css({ font: 'bold 2em sans-serif', marginBlock: '0.67em' })">My Vike app</h1>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <h1>My Vike app</h1>
   This page is:
   <ul>
@@ -10,9 +12,7 @@
   </ul>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Counter from "../../components/Counter.vue";
-
-const components = { Counter };
-export default { components };
+import { css } from "../../styled-system/css";
 </script>

package/dist/boilerplates/@batijs/vue/files/pages/todo/TodoList.vue

@@ -5,8 +5,8 @@
     </li>
     <li>
       <form @submit.prevent="submitNewTodo()">
-        <input v-model="newTodo" type="text" />{{ " " }}
-        <button type="submit">Add to-do</button>
+        <input v-model="newTodo" type="text" :class="[inputClass]" />
+        <button type="submit" :class="[buttonClass]">Add to-do</button>
       </form>
     </li>
   </ul>
@@ -17,6 +17,49 @@ 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 { ref } from "vue";
+import { css } from "../../styled-system/css";
+
+const inputClass = ref(
+  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"
+    : BATI.has("panda-css")
+      ? 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,
+        })
+      : "",
+);
+const buttonClass = ref(
+  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"
+    : BATI.has("panda-css")
+      ? 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,
+        })
+      : "",
+);
 
 const props = defineProps<{ initialTodoItems: { text: string }[] }>();
 const todoItems = ref(props.initialTodoItems);

package/dist/boilerplates/@batijs/vue-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/vue-sentry/dist/files/$package.json.js

package/dist/boilerplates/boilerplates.json

@@ -245,6 +245,17 @@
       "files"
     ]
   },
+  {
+    "config": {
+      "if": {
+        "flag": "panda-css"
+      }
+    },
+    "folder": "@batijs/panda-css",
+    "subfolders": [
+      "files"
+    ]
+  },
   {
     "config": {
       "if": {