@batijs/cli 0.0.307 → 0.0.309

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-2XLSFFOD.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/vue-sentry/dist/files/$package.json.js
@@ -47,7 +47,7 @@ var require_package = __commonJS({
       license: "MIT",
       devDependencies: {
         "@batijs/compile": "workspace:*",
-        "@sentry/vue": "^8.38.0",
+        "@sentry/vue": "^8.39.0",
         "@types/node": "^18.19.64",
         "vike-vue": "^0.8.5",
         vite: "^5.4.11",

package/dist/boilerplates/boilerplates.json

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