@pandacss/studio 0.0.0-dev-20230920234116 → 0.0.0-dev-20230922200913

package/astro.config.mjs

@@ -1,6 +1,6 @@
 import { defineConfig } from 'astro/config'
 import react from '@astrojs/react'
-import virtualPanda from './virtual-panda.mjs'
+import virtualPanda from './virtual-panda'
 
 // https://astro.build/config
 export default defineConfig({

package/dist/studio.d.mts

@@ -1,8 +1,9 @@
 type BuildOpts = {
     outDir: string;
+    configPath: string;
 };
-declare function buildStudio({ outDir }: BuildOpts): Promise<void>;
-declare function serveStudio(): Promise<void>;
+declare function buildStudio({ outDir, configPath }: BuildOpts): Promise<void>;
+declare function serveStudio({ configPath }: BuildOpts): Promise<void>;
 declare function previewStudio({ outDir }: BuildOpts): Promise<void>;
 declare function printUrls(options: {
     host: string;

package/dist/studio.d.ts

@@ -1,8 +1,9 @@
 type BuildOpts = {
     outDir: string;
+    configPath: string;
 };
-declare function buildStudio({ outDir }: BuildOpts): Promise<void>;
-declare function serveStudio(): Promise<void>;
+declare function buildStudio({ outDir, configPath }: BuildOpts): Promise<void>;
+declare function serveStudio({ configPath }: BuildOpts): Promise<void>;
 declare function previewStudio({ outDir }: BuildOpts): Promise<void>;
 declare function printUrls(options: {
     host: string;

package/dist/studio.js

@@ -2069,17 +2069,23 @@ var import_node_module = require("module");
 var require2 = (0, import_node_module.createRequire)(importMetaUrl);
 var astroBin = require2.resolve("astro");
 var appPath = (0, import_node_path3.join)(__dirname, "..");
-async function buildStudio({ outDir }) {
+async function buildStudio({ outDir, configPath }) {
   process.env.ASTRO_OUT_DIR = outDir;
   const { stdout } = await execa(astroBin, ["build", "--root", appPath], {
-    cwd: appPath
+    cwd: appPath,
+    env: {
+      PUBLIC_CONFIG_PATH: configPath
+    }
   });
   import_logger.logger.log(stdout);
 }
-async function serveStudio() {
+async function serveStudio({ configPath }) {
   const result = execa(astroBin, ["dev", "--root", appPath], {
     stdio: "inherit",
-    cwd: appPath
+    cwd: appPath,
+    env: {
+      PUBLIC_CONFIG_PATH: configPath
+    }
   });
   result.stdout?.pipe(process.stdout);
   result.stderr?.pipe(process.stderr);

package/dist/studio.mjs

@@ -2065,17 +2065,23 @@ import { createRequire } from "node:module";
 var require2 = createRequire(import.meta.url);
 var astroBin = require2.resolve("astro");
 var appPath = join(__dirname, "..");
-async function buildStudio({ outDir }) {
+async function buildStudio({ outDir, configPath }) {
   process.env.ASTRO_OUT_DIR = outDir;
   const { stdout } = await execa(astroBin, ["build", "--root", appPath], {
-    cwd: appPath
+    cwd: appPath,
+    env: {
+      PUBLIC_CONFIG_PATH: configPath
+    }
   });
   logger.log(stdout);
 }
-async function serveStudio() {
+async function serveStudio({ configPath }) {
   const result = execa(astroBin, ["dev", "--root", appPath], {
     stdio: "inherit",
-    cwd: appPath
+    cwd: appPath,
+    env: {
+      PUBLIC_CONFIG_PATH: configPath
+    }
   });
   result.stdout?.pipe(process.stdout);
   result.stderr?.pipe(process.stderr);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20230920234116",
+  "version": "0.0.0-dev-20230922200913",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -33,19 +33,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.9",
-    "@pandacss/types": "0.0.0-dev-20230920234116",
-    "@pandacss/config": "0.0.0-dev-20230920234116",
-    "@pandacss/shared": "0.0.0-dev-20230920234116",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230920234116",
-    "@pandacss/logger": "0.0.0-dev-20230920234116",
-    "@pandacss/node": "0.0.0-dev-20230920234116"
+    "@pandacss/config": "0.0.0-dev-20230922200913",
+    "@pandacss/logger": "0.0.0-dev-20230922200913",
+    "@pandacss/node": "0.0.0-dev-20230922200913",
+    "@pandacss/shared": "0.0.0-dev-20230922200913",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230922200913",
+    "@pandacss/types": "0.0.0-dev-20230922200913"
   },
   "devDependencies": {
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "@vitejs/plugin-react": "4.0.4",
     "execa": "7.2.0",
-    "@pandacss/dev": "0.0.0-dev-20230920234116"
+    "@pandacss/dev": "0.0.0-dev-20230922200913"
   },
   "scripts": {
     "codegen": "panda",

package/src/lib/panda.context.ts

@@ -1,11 +1,9 @@
 import { flatten } from '@pandacss/shared'
 import { TokenDictionary } from '@pandacss/token-dictionary'
-import type { TokenDataTypes, UserConfig } from '@pandacss/types'
+import type { TokenDataTypes } from '@pandacss/types'
+import { config } from 'virtual:panda'
 
-// @ts-ignore
-import { config as _config } from 'virtual:panda'
-
-const config = _config as UserConfig
+// console.log('_config', config)
 
 const { theme } = config
 

package/src/lib/virtual-panda.d.ts

@@ -0,0 +1,3 @@
+declare module 'virtual:*' {
+  export const config: import('@pandacss/types').UserConfig
+}

package/styled-system/chunks/src__components__analyzer__category-utilities.css

@@ -1,225 +1,118 @@
 @layer utilities {
-  .\[\&_li\]\:cursor_pointer {
-    & li {
-      cursor: pointer;
-    }
-  }
-
-  .\[\&_li\]\:cursor_pointer {
-    & li {
-      cursor: pointer;
-    }
-  }
-
-  .\[\&_li\]\:cursor_pointer {
-    & li {
-      cursor: pointer;
-    }
-  }
 
   .p_4px_8px {
-    padding: 4px 8px;
-  }
-
-  .\[\&_li\]\:cursor_pointer {
-    & li {
-      cursor: pointer;
-    }
-  }
-
-  .hover\:opacity_0\.6 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.6;
-    }
-  }
-
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-
-  .hover\:opacity_0\.6 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.6;
-    }
-  }
-
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
+    padding: 4px 8px
     }
-  }
 
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-
-  .hover\:opacity_0\.6 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.6;
-    }
-  }
-
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
+  .\[\&_li\]\:cursor_pointer li {
+    cursor: pointer
+        }
 
   .list-style_none {
-    list-style: none;
-  }
+    list-style: none
+    }
 
   .p_0 {
-    padding: var(--spacing-0);
-  }
+    padding: var(--spacing-0)
+    }
 
   .ml_auto {
-    margin-left: auto;
-  }
+    margin-left: auto
+    }
 
   .w_26px {
-    width: 26px;
-  }
+    width: 26px
+    }
 
   .ml_2 {
-    margin-left: var(--spacing-2);
-  }
-
-  .hover\:opacity_0\.6 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.6;
+    margin-left: var(--spacing-2)
     }
-  }
 
   .font_semibold {
-    font-weight: var(--font-weights-semibold);
-  }
+    font-weight: var(--font-weights-semibold)
+    }
 
   .d_grid {
-    display: grid;
-  }
+    display: grid
+    }
 
   .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+    }
 
   .gap_4 {
-    gap: var(--spacing-4);
-  }
+    gap: var(--spacing-4)
+    }
 
   .col-span_span_2 {
-    grid-column: span 2;
-  }
+    grid-column: span 2
+    }
 
   .flex_column {
-    flex-direction: column;
-  }
+    flex-direction: column
+    }
 
   .p_4 {
-    padding: var(--spacing-4);
-  }
+    padding: var(--spacing-4)
+    }
 
   .bg_card {
-    background: var(--colors-card);
-  }
+    background: var(--colors-card)
+    }
 
   .text_text {
-    color: var(--colors-text);
-  }
+    color: var(--colors-text)
+    }
 
   .rounded_md {
-    border-radius: var(--radii-md);
-  }
+    border-radius: var(--radii-md)
+    }
 
   .d_inline-flex {
-    display: inline-flex;
-  }
+    display: inline-flex
+    }
 
   .items_center {
-    align-items: center;
-  }
+    align-items: center
+    }
 
   .opacity_0\.5 {
-    opacity: 0.5;
-  }
+    opacity: 0.5
+    }
 
   .border-b_1px_solid_transparent {
-    border-bottom: 1px solid transparent;
-  }
-
-  .cursor_pointer {
-    cursor: pointer;
-  }
-
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
+    border-bottom: 1px solid transparent
     }
-  }
 
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
+  .cursor_pointer {
+    cursor: pointer
     }
-  }
 
   .d_flex {
-    display: flex;
-  }
+    display: flex
+    }
 
   .flex-wrap_wrap {
-    flex-wrap: wrap;
-  }
+    flex-wrap: wrap
+    }
 
   .gap_2 {
-    gap: var(--spacing-2);
-  }
-
-  .\[\&_li\]\:hover\:opacity_0\.8 {
-    & li {
-      &:where(:hover, [data-hover]) {
-        opacity: 0.8;
-      }
+    gap: var(--spacing-2)
     }
-  }
 
-  .\[\&_li\]\:hover\:opacity_0\.8 {
-    & li {
-      &:where(:hover, [data-hover]) {
-        opacity: 0.8;
-      }
-    }
-  }
+  .hover\:opacity_0\.6:is(:hover, [data-hover]) {
+    opacity: 0.6
+        }
 
-  .\[\&_li\]\:hover\:opacity_0\.8 {
-    & li {
-      &:where(:hover, [data-hover]) {
-        opacity: 0.8;
-      }
-    }
-  }
+  .hover\:opacity_1:is(:hover, [data-hover]) {
+    opacity: 1
+        }
 
-  .\[\&_li\]\:hover\:opacity_0\.8 {
-    & li {
-      &:where(:hover, [data-hover]) {
-        opacity: 0.8;
-      }
-    }
-  }
-}
+  .hover\:border-b_black:is(:hover, [data-hover]) {
+    border-bottom-color: var(--colors-black)
+        }
+
+  .\[\&_li\]\:hover\:opacity_0\.8 li:is(:hover, [data-hover]) {
+    opacity: 0.8
+            }
+}

package/styled-system/chunks/src__components__analyzer__data-combobox.css

@@ -1,182 +1,137 @@
 @layer utilities {
-  .m_4 {
-    margin: var(--spacing-4);
-  }
-
-  .highlighted\:bg_border {
-    &[data-highlighted] {
-      background: var(--colors-border);
-    }
-  }
-
-  .expanded\:transform_rotate\(180deg\) {
-    &:where([aria-expanded='true'], [data-expanded]) {
-      transform: rotate(180deg);
-    }
-  }
-
-  .highlighted\:bg_border {
-    &[data-highlighted] {
-      background: var(--colors-border);
-    }
-  }
-
-  .expanded\:transform_rotate\(180deg\) {
-    &:where([aria-expanded='true'], [data-expanded]) {
-      transform: rotate(180deg);
-    }
-  }
 
-  .highlighted\:bg_border {
-    &[data-highlighted] {
-      background: var(--colors-border);
-    }
-  }
-
-  .expanded\:transform_rotate\(180deg\) {
-    &:where([aria-expanded='true'], [data-expanded]) {
-      transform: rotate(180deg);
+  .m_4 {
+    margin: var(--spacing-4)
     }
-  }
-
-  .transition_all_\.2s_ease {
-    transition: all 0.2s ease;
-  }
 
   .max-h_300px {
-    max-height: 300px;
-  }
+    max-height: 300px
+    }
 
   .overflow_auto {
-    overflow: auto;
-  }
+    overflow: auto
+    }
 
   .bg_card {
-    background: var(--colors-card);
-  }
+    background: var(--colors-card)
+    }
 
   .list-style_none {
-    list-style: none;
-  }
+    list-style: none
+    }
 
   .border_1px_solid_token\(colors\.border\) {
-    border: 1px solid var(--colors-border);
-  }
+    border: 1px solid var(--colors-border)
+    }
 
   .shadow_sm {
-    box-shadow: var(--shadows-sm);
-  }
+    box-shadow: var(--shadows-sm)
+    }
 
   .p_4px_8px {
-    padding: 4px 8px;
-  }
+    padding: 4px 8px
+    }
 
   .rounded_md {
-    border-radius: var(--radii-md);
-  }
+    border-radius: var(--radii-md)
+    }
 
   .word-wrap_break-word {
-    word-wrap: break-word;
-  }
-
-  .highlighted\:bg_border {
-    &[data-highlighted] {
-      background: var(--colors-border);
+    word-wrap: break-word
     }
-  }
+    .highlighted\:bg_border[data-highlighted] {
+      background: var(--colors-border)
+        }
 
   .flex_column {
-    flex-direction: column;
-  }
+    flex-direction: column
+    }
 
   .gap_2 {
-    gap: var(--spacing-2);
-  }
+    gap: var(--spacing-2)
+    }
 
   .pos_relative {
-    position: relative;
-  }
+    position: relative
+    }
 
   .isolation_isolate {
-    isolation: isolate;
-  }
+    isolation: isolate
+    }
 
   .font_bold {
-    font-weight: var(--font-weights-bold);
-  }
+    font-weight: var(--font-weights-bold)
+    }
 
   .px_2 {
-    padding-inline: var(--spacing-2);
-  }
+    padding-inline: var(--spacing-2)
+    }
 
   .select_none {
     -webkit-user-select: none;
-    user-select: none;
-  }
+    user-select: none
+    }
 
   .ml_auto {
-    margin-left: auto;
-  }
+    margin-left: auto
+    }
 
   .p_2 {
-    padding: var(--spacing-2);
-  }
+    padding: var(--spacing-2)
+    }
 
   .cursor_pointer {
-    cursor: pointer;
-  }
+    cursor: pointer
+    }
 
   .border-l_solid_1px {
-    border-left: solid 1px;
-  }
+    border-left: solid 1px
+    }
 
   .border_border {
-    border-color: var(--colors-border);
-  }
+    border-color: var(--colors-border)
+    }
 
   .text_text {
-    color: var(--colors-text);
-  }
-
-  .expanded\:transform_rotate\(180deg\) {
-    &:where([aria-expanded='true'], [data-expanded]) {
-      transform: rotate(180deg);
+    color: var(--colors-text)
     }
-  }
+    .expanded\:transform_rotate\(180deg\):is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
+      transform: rotate(180deg)
+        }
 
   .transition_all_\.2s_ease {
-    transition: all 0.2s ease;
-  }
+    transition: all .2s ease
+    }
 
   .d_flex {
-    display: flex;
-  }
+    display: flex
+    }
 
   .items_center {
-    align-items: center;
-  }
+    align-items: center
+    }
 
   .justify_center {
-    justify-content: center;
-  }
+    justify-content: center
+    }
 
   .top_0px {
-    top: 0px;
-  }
+    top: 0px
+    }
 
   .right_0px {
-    right: 0px;
-  }
+    right: 0px
+    }
 
   .pos_absolute {
-    position: absolute;
-  }
+    position: absolute
+    }
 
   .z_2 {
-    z-index: 2;
-  }
+    z-index: 2
+    }
 
   .h_full {
-    height: var(--sizes-full);
-  }
-}
+    height: var(--sizes-full)
+    }
+}