@pandacss/studio 0.3.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -32,19 +32,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.3.9",
-    "@pandacss/types": "0.3.1",
-    "@pandacss/config": "0.3.1",
-    "@pandacss/shared": "0.3.1",
-    "@pandacss/token-dictionary": "0.3.1",
-    "@pandacss/logger": "0.3.1",
-    "@pandacss/node": "0.3.1"
+    "@pandacss/types": "0.4.0",
+    "@pandacss/config": "0.4.0",
+    "@pandacss/shared": "0.4.0",
+    "@pandacss/token-dictionary": "0.4.0",
+    "@pandacss/logger": "0.4.0",
+    "@pandacss/node": "0.4.0"
   },
   "devDependencies": {
     "@types/react": "18.2.12",
     "@types/react-dom": "18.2.5",
     "@vitejs/plugin-react": "4.0.0",
     "execa": "7.1.1",
-    "@pandacss/dev": "0.3.1"
+    "@pandacss/dev": "0.4.0"
   },
   "scripts": {
     "codegen": "panda",

package/src/components/analyzer/data-combobox.tsx

@@ -11,8 +11,9 @@ import {
 } from '@ark-ui/react'
 import { useEffect, useState } from 'react'
 import { css } from '../../../styled-system/css'
-import { panda } from '../../../styled-system/jsx'
-import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '../icons'
+import { Flex, panda } from '../../../styled-system/jsx'
+import { ChevronDownIcon, XMarkIcon } from '../icons'
+import { inputRecipe } from '../input'
 
 export type DataComboboxOption = {
   value: string
@@ -45,28 +46,17 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
         return (
           <>
             <ComboboxControl>
-              <panda.div display="flex" flexDirection="column">
+              <panda.div display="flex" flexDirection="column" gap="2">
                 {label && (
                   <ComboboxLabel>
                     <panda.span fontWeight="bold">{label}</panda.span>
                   </ComboboxLabel>
                 )}
-                <panda.div
-                  display="flex"
-                  rounded="sm"
-                  border="solid 1px"
-                  borderColor={{ base: 'border', _focusWithin: { base: 'yellow.200', _dark: 'yellow.300' } }}
-                >
+                <panda.div display="flex" position="relative" isolation="isolate">
                   <ComboboxInput
                     defaultValue={props.defaultValue}
                     placeholder={props.placeholder ?? 'Search...'}
-                    className={css({
-                      width: 'full',
-                      p: 2,
-                      color: 'text',
-                      bg: 'transparent',
-                      _focus: { outline: 'none' },
-                    })}
+                    className={inputRecipe()}
                     onChange={(e) => {
                       const value = e.target.value
                       if (!value) {
@@ -79,31 +69,47 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
                       setOptions(filterFn(value))
                     }}
                   />
-                  {state.selectedValue && (
-                    <panda.span
-                      display="flex"
-                      px="2"
-                      cursor="pointer"
-                      userSelect="none"
-                      onClick={() => state.clearValue()}
-                      alignItems="center"
-                    >
-                      <XMarkIcon />
-                    </panda.span>
-                  )}
-                  <ComboboxTrigger>
-                    <panda.span
-                      ml="auto"
-                      p="2"
-                      display="flex"
-                      cursor="pointer"
-                      borderLeft="solid 1px"
-                      borderColor="border"
-                      color="text"
-                    >
-                      {state.isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                    </panda.span>
-                  </ComboboxTrigger>
+                  <Flex
+                    top="0px"
+                    right="0px"
+                    align="center"
+                    justify="center"
+                    position="absolute"
+                    zIndex="2"
+                    height="full"
+                  >
+                    {state.selectedValue && (
+                      <panda.span
+                        display="flex"
+                        px="2"
+                        cursor="pointer"
+                        userSelect="none"
+                        onClick={() => state.clearValue()}
+                        alignItems="center"
+                      >
+                        <XMarkIcon />
+                      </panda.span>
+                    )}
+                    <ComboboxTrigger>
+                      <panda.span
+                        ml="auto"
+                        p="2"
+                        display="flex"
+                        cursor="pointer"
+                        borderLeft="solid 1px"
+                        borderColor="border"
+                        color="text"
+                      >
+                        <panda.span
+                          data-expanded={state.isOpen ? '' : undefined}
+                          transform={{ _expanded: 'rotate(180deg)' }}
+                          transition="all .2s ease"
+                        >
+                          <ChevronDownIcon />
+                        </panda.span>
+                      </panda.span>
+                    </ComboboxTrigger>
+                  </Flex>
                 </panda.div>
               </panda.div>
             </ComboboxControl>

package/src/components/analyzer/data-table.tsx

@@ -9,8 +9,7 @@ export function DataTable<T>({ list, columns }: { list: T[]; columns: ReadonlyAr
   return (
     <panda.div>
       <Grid
-        style={{ gridTemplateColumns: `80px repeat(auto-fit, minmax(30px, 1fr))` }}
-        // gridTemplateColumns="repeat(auto-fit, minmax(30px, 1fr))"
+        gridTemplateColumns="80px repeat(auto-fit, minmax(30px, 1fr))"
         w="full"
         fontWeight="bold"
         fontSize="lg"
@@ -23,15 +22,12 @@ export function DataTable<T>({ list, columns }: { list: T[]; columns: ReadonlyAr
       <panda.div className={flex({ direction: 'column', gap: '2' })}>
         {list.map((item, index) => {
           return (
-            <Grid
-              style={{ gridTemplateColumns: `80px repeat(auto-fit, minmax(30px, 1fr))` }}
-              // gridTemplateColumns="repeat(auto-fit, minmax(30px, 1fr))"
-              w="full"
-              key={index}
-            >
+            <Grid gridTemplateColumns="80px repeat(auto-fit, minmax(30px, 1fr))" w="full" key={index}>
               {columns.map((column) => {
                 return (
-                  <panda.div key={column.accessor}>{column.cell?.(item) ?? (item as any)[column.accessor]}</panda.div>
+                  <panda.div key={column.accessor} wordBreak="break-word">
+                    {column.cell?.(item) ?? (item as any)[column.accessor]}
+                  </panda.div>
                 )
               })}
             </Grid>

package/src/components/input.tsx

@@ -1,7 +1,7 @@
 import { cva } from '../../styled-system/css'
 import { panda } from '../../styled-system/jsx'
 
-const recipe = cva({
+export const inputRecipe = cva({
   base: {
     bg: 'transparent',
     width: 'full',
@@ -22,6 +22,6 @@ const recipe = cva({
   variants: {},
 })
 
-export const Input = panda('input', recipe)
+export const Input = panda('input', inputRecipe)
 
-export const Textarea = panda('textarea', recipe)
+export const Textarea = panda('textarea', inputRecipe)

package/src/layouts/Sidebar.astro

@@ -24,8 +24,8 @@ const { title } = Astro.props
     <SideNav />
   </Stack>
 
-  <Container width="full">
-    <panda.div overflow="auto" px="4" pt="14" pb="8">
+  <Container width="full" overflow="auto">
+    <panda.div px="4" pt="14" pb="8">
       <panda.h1 fontSize="3xl" fontWeight="semibold" mb="8" letterSpacing="tight">
         {title}
       </panda.h1>

package/styled-system/chunks/..__core____tests____atomic-rule.test.css

@@ -0,0 +1,363 @@
+@layer utilities {
+  .styles\:text_red\! {
+    color: red !important;
+  }
+
+  .styles\:fs_30px\! {
+    font-size: 30px !important;
+  }
+
+  .styles\:bg_red\.300 {
+    background: var(--colors-red-300);
+  }
+
+  .styles\:w_20px {
+    width: 20px;
+  }
+
+  .styles\:w_70px {
+    width: 70px;
+  }
+
+  .styles\:w_50px {
+    width: 50px;
+  }
+
+  .styles\:ltr\:sm\:ml_4 {
+    [dir='ltr'] & {
+      @media screen and (min-width: 640px) {
+        margin-left: var(--spacing-4);
+      }
+    }
+  }
+
+  .styles\:rtl\:ml_-4 {
+    [dir='rtl'] & {
+      margin-left: calc(var(--spacing-4) * -1);
+    }
+  }
+
+  .styles\:light\:text_red {
+    &.light,
+    .light & {
+      color: red;
+    }
+  }
+
+  .styles\:dark\:text_green {
+    &.dark,
+    .dark & {
+      color: green;
+    }
+  }
+
+  .styles\:dark\:opacity_slate400 {
+    &.dark,
+    .dark & {
+      opacity: slate400;
+    }
+  }
+
+  .styles\:sm\:rtl\:top_20px {
+    [dir='rtl'] & {
+      @media screen and (min-width: 640px) {
+        top: 20px;
+      }
+    }
+  }
+
+  .styles\:left_20px {
+    left: 20px;
+  }
+
+  .styles\:\[\&_\>_p\]\:left_20px {
+    & > p {
+      left: 20px;
+    }
+  }
+
+  .styles\:\[\&_\>_p\]\:md\:left_40px {
+    & > p {
+      @media screen and (min-width: 768px) {
+        left: 40px;
+      }
+    }
+  }
+
+  .styles\:\[\&_\>_p\]\:light\:bg_red400 {
+    & > p {
+      &.light,
+      .light & {
+        background: red400;
+      }
+    }
+  }
+
+  .styles\:\[\&_\>_p\]\:dark\:bg_green500 {
+    & > p {
+      &.dark,
+      .dark & {
+        background: green500;
+      }
+    }
+  }
+
+  .styles\:\[\&_\>_p\]\:rtl\:font_sans {
+    & > p {
+      [dir='rtl'] & {
+        font: sans;
+      }
+    }
+  }
+
+  .styles\:\[\&\:\:placeholder\]\:left_40px {
+    &::placeholder {
+      left: 40px;
+    }
+  }
+
+  .styles\:\[\&\:\:placeholder\]\:bg_red400 {
+    &::placeholder {
+      background: red400;
+    }
+  }
+
+  .styles\:\[\&\:\:placeholder\]\:sm\:text_left {
+    &::placeholder {
+      @media screen and (min-width: 640px) {
+        text-align: left;
+      }
+    }
+  }
+
+  .styles\:all_unset {
+    all: unset;
+  }
+
+  .styles\:bg_red {
+    background-color: red;
+  }
+
+  .styles\:border_none {
+    border: var(--borders-none);
+  }
+
+  .styles\:p_\$3_\$3 {
+    padding: $3 $3;
+  }
+
+  .styles\:rounded_\$button {
+    border-radius: $button;
+  }
+
+  .styles\:fs_\$xsmall {
+    font-size: $xsmall;
+  }
+
+  .styles\:cursor_pointer {
+    cursor: pointer;
+  }
+
+  .styles\:\[\&_\+_span\]\:ml_\$2 {
+    & + span {
+      margin-left: $2;
+    }
+  }
+
+  .styles\:\[\.test_\&\]\:bg_blue {
+    .test & {
+      background-color: blue;
+    }
+  }
+
+  .styles\:\[\&_\.my-class\]\:text_red {
+    & .my-class {
+      color: red;
+    }
+  }
+
+  .styles\:\[\&_span\]\:text_red {
+    & span {
+      color: red;
+    }
+  }
+
+  .styles\:\[\&_kbd\]\:text_red {
+    & kbd {
+      color: red;
+    }
+  }
+
+  .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none {
+    &:focus,
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  .styles\:\[\:focus_\>_\&\]\:text_white {
+    :focus > & {
+      color: var(--colors-white);
+    }
+  }
+
+  .styles\:sm\:hover\:top_50px {
+    &:where(:hover, [data-hover]) {
+      @media screen and (min-width: 640px) {
+        top: 50px;
+      }
+    }
+  }
+
+  .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif {
+    & > p {
+      &:where(:hover, [data-hover]) {
+        [dir='ltr'] & {
+          &.dark,
+          .dark & {
+            @media screen and (min-width: 640px) {
+              font: serif;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .styles\:\[input\:hover_\&\]\:bg_red400 {
+    input:hover & {
+      background: red400;
+    }
+  }
+
+  .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
+    input:hover & {
+      @media screen and (min-width: 640px) {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
+    input:hover & {
+      @media screen and (min-width: 1024px) {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .styles\:hover\:bg_pink\.400 {
+    &:where(:hover, [data-hover]) {
+      background: var(--colors-pink-400);
+    }
+  }
+
+  .styles\:hover\:sm\:dark\:bg_red\.300 {
+    &:where(:hover, [data-hover]) {
+      &.dark,
+      .dark & {
+        @media screen and (min-width: 640px) {
+          background: var(--colors-red-300);
+        }
+      }
+    }
+  }
+
+  .styles\:hover\:text_pink\.400 {
+    &:where(:hover, [data-hover]) {
+      color: var(--colors-pink-400);
+    }
+  }
+
+  .styles\:hover\:disabled\:sm\:bg_red\.300 {
+    &:where(:hover, [data-hover]) {
+      &:where(:disabled, [disabled], [data-disabled]) {
+        @media screen and (min-width: 640px) {
+          background: var(--colors-red-300);
+        }
+      }
+    }
+  }
+
+  .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px {
+    &:hover {
+      @media base {
+        left: 40px;
+      }
+    }
+  }
+
+  .styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left {
+    &:hover {
+      @media base {
+        @media screen and (min-width: 640px) {
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow {
+    &:hover {
+      @media (min-width: 768px) {
+        background-color: yellow;
+      }
+    }
+  }
+
+  .styles\:sm\:w_60px {
+    @media screen and (min-width: 640px) {
+      width: 60px;
+    }
+  }
+
+  .styles\:sm\:w_60px {
+    @media screen and (min-width: 640px) {
+      width: 60px;
+    }
+  }
+
+  .styles\:lg\:top_120px {
+    @media screen and (min-width: 1024px) {
+      top: 120px;
+    }
+  }
+
+  .styles\:md\:left_40px {
+    @media screen and (min-width: 768px) {
+      left: 40px;
+    }
+  }
+
+  .styles\:\[\@media_base\]\:left_40px {
+    @media base {
+      left: 40px;
+    }
+  }
+
+  .styles\:\[\@media_base\]\:sm\:text_left {
+    @media base {
+      @media screen and (min-width: 640px) {
+        text-align: left;
+      }
+    }
+  }
+
+  .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
+    @media (min-width: 768px) {
+      background-color: green;
+    }
+  }
+
+  .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
+    @media (min-width: 768px) {
+      background-color: green;
+    }
+  }
+
+  .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
+    @media (min-width: 768px) {
+      font-size: $small;
+    }
+  }
+}

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

@@ -3,21 +3,6 @@
     margin: var(--spacing-4);
   }
 
-  .w_full {
-    width: var(--sizes-full);
-  }
-
-  .bg_transparent {
-    background: var(--colors-transparent);
-  }
-
-  .focus\:ring_none {
-    &:where(:focus, [data-focus]) {
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-    }
-  }
-
   .max-h_300px {
     max-height: 300px;
   }
@@ -64,27 +49,16 @@
     flex-direction: column;
   }
 
-  .rounded_sm {
-    border-radius: var(--radii-sm);
+  .gap_2 {
+    gap: var(--spacing-2);
   }
 
-  .border_solid_1px {
-    border: solid 1px;
+  .pos_relative {
+    position: relative;
   }
 
-  .focusWithin\:border_yellow\.200 {
-    &:focus-within {
-      border-color: var(--colors-yellow-200);
-    }
-  }
-
-  .focusWithin\:dark\:border_yellow\.300 {
-    &:focus-within {
-      &.dark,
-      .dark & {
-        border-color: var(--colors-yellow-300);
-      }
-    }
+  .isolation_isolate {
+    isolation: isolate;
   }
 
   .font_bold {
@@ -99,10 +73,6 @@
     user-select: none;
   }
 
-  .items_center {
-    align-items: center;
-  }
-
   .ml_auto {
     margin-left: auto;
   }
@@ -111,10 +81,6 @@
     padding: var(--spacing-2);
   }
 
-  .d_flex {
-    display: flex;
-  }
-
   .cursor_pointer {
     cursor: pointer;
   }
@@ -130,4 +96,46 @@
   .text_text {
     color: var(--colors-text);
   }
+
+  .expanded\:transform_rotate\(180deg\) {
+    &:where([aria-expanded='true'], [data-expanded]) {
+      transform: rotate(180deg);
+    }
+  }
+
+  .transition_all_\.2s_ease {
+    transition: all 0.2s ease;
+  }
+
+  .d_flex {
+    display: flex;
+  }
+
+  .items_center {
+    align-items: center;
+  }
+
+  .justify_center {
+    justify-content: center;
+  }
+
+  .top_0px {
+    top: 0px;
+  }
+
+  .right_0px {
+    right: 0px;
+  }
+
+  .pos_absolute {
+    position: absolute;
+  }
+
+  .z_2 {
+    z-index: 2;
+  }
+
+  .h_full {
+    height: var(--sizes-full);
+  }
 }