@pandacss/studio 0.0.0-dev-20230616145250 → 0.0.0-dev-20230616192531

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20230616145250",
+  "version": "0.0.0-dev-20230616192531",
   "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.0.0-dev-20230616145250",
-    "@pandacss/config": "0.0.0-dev-20230616145250",
-    "@pandacss/shared": "0.0.0-dev-20230616145250",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230616145250",
-    "@pandacss/logger": "0.0.0-dev-20230616145250",
-    "@pandacss/node": "0.0.0-dev-20230616145250"
+    "@pandacss/types": "0.0.0-dev-20230616192531",
+    "@pandacss/config": "0.0.0-dev-20230616192531",
+    "@pandacss/shared": "0.0.0-dev-20230616192531",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230616192531",
+    "@pandacss/logger": "0.0.0-dev-20230616192531",
+    "@pandacss/node": "0.0.0-dev-20230616192531"
   },
   "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.0.0-dev-20230616145250"
+    "@pandacss/dev": "0.0.0-dev-20230616192531"
   },
   "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/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);
+  }
 }

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

@@ -1,4 +1,8 @@
 @layer utilities {
+  .break_break-word {
+    word-break: break-word;
+  }
+
   .font_bold {
     font-weight: var(--font-weights-bold);
   }
@@ -15,6 +19,10 @@
     display: grid;
   }
 
+  .grid-cols_80px_repeat\(auto-fit\,_minmax\(30px\,_1fr\)\) {
+    grid-template-columns: 80px repeat(auto-fit, minmax(30px, 1fr));
+  }
+
   .gap_10px {
     gap: 10px;
   }

package/styled-system/chunks/src__components__analyzer__file-details.css

@@ -1,103 +1,103 @@
 @layer utilities {
-
   .ml_auto {
-    margin-left: auto
-    }
+    margin-left: auto;
+  }
 
   .p_4 {
-    padding: var(--spacing-4)
-    }
+    padding: var(--spacing-4);
+  }
 
   .justify_center {
-    justify-content: center
-    }
+    justify-content: center;
+  }
 
   .fs_xl {
-    font-size: var(--font-sizes-xl)
-    }
+    font-size: var(--font-sizes-xl);
+  }
 
   .p_16 {
-    padding: var(--spacing-16)
-    }
+    padding: var(--spacing-16);
+  }
 
   .mt_8 {
-    margin-top: var(--spacing-8)
-    }
+    margin-top: var(--spacing-8);
+  }
 
   .mt_1 {
-    margin-top: var(--spacing-1)
-    }
+    margin-top: var(--spacing-1);
+  }
 
   .font_bold {
-    font-weight: var(--font-weights-bold)
-    }
+    font-weight: var(--font-weights-bold);
+  }
 
   .mb_4 {
-    margin-bottom: var(--spacing-4)
-    }
+    margin-bottom: var(--spacing-4);
+  }
 
   .py_2 {
-    padding-block: var(--spacing-2)
-    }
+    padding-block: var(--spacing-2);
+  }
 
   .px_4 {
-    padding-inline: var(--spacing-4)
-    }
+    padding-inline: var(--spacing-4);
+  }
 
   .transition_all_0\.2s_ease {
-    transition: all 0.2s ease
-    }
+    transition: all 0.2s ease;
+  }
 
   .hover\:bg_gray\.100 {
     &:where(:hover, [data-hover]) {
-      background-color: var(--colors-gray-100)
-        }
+      background-color: var(--colors-gray-100);
     }
+  }
 
   .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
-    }
+    border-bottom: 1px solid transparent;
+  }
 
   .cursor_pointer {
-    cursor: pointer
-    }
+    cursor: pointer;
+  }
 
   .hover\:opacity_1 {
     &:where(:hover, [data-hover]) {
-      opacity: 1
-        }
+      opacity: 1;
     }
+  }
 
   .hover\:border-b_black {
     &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black)
-        }
+      border-bottom-color: var(--colors-black);
     }
+  }
 
   .d_flex {
-    display: flex
-    }
+    display: flex;
+  }
 
   .flex-wrap_wrap {
-    flex-wrap: wrap
-    }
+    flex-wrap: wrap;
+  }
 
   .gap_2 {
-    gap: var(--spacing-2)
-    }
+    gap: var(--spacing-2);
+  }
 
   .mt_4 {
-    margin-top: var(--spacing-4)
-    }}
+    margin-top: var(--spacing-4);
+  }
+}

package/styled-system/chunks/src__components__analyzer__quick-tooltip.css

@@ -1 +1,2 @@
-@layer utilities {}
+@layer utilities {
+}

package/styled-system/chunks/src__components__analyzer__report-item-link.css

@@ -1,116 +1,117 @@
 @layer utilities {
   .d_flex {
-    display: flex
-    }
+    display: flex;
+  }
 
   .pos_relative {
-    position: relative
-    }
+    position: relative;
+  }
 
   .max-w_14px {
-    max-width: 14px
-    }
+    max-width: 14px;
+  }
 
   .shrink_0 {
-    flex-shrink: 0
-    }
+    flex-shrink: 0;
+  }
 
   .p_2 {
-    padding: var(--spacing-2)
-    }
+    padding: var(--spacing-2);
+  }
 
   .bg_card {
-    background-color: var(--colors-card)
-    }
+    background-color: var(--colors-card);
+  }
 
   .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);
+  }
 
   .rounded_md {
-    border-radius: var(--radii-md)
-    }
+    border-radius: var(--radii-md);
+  }
 
   .hover\:opacity_1 {
     &:where(:hover, [data-hover]) {
-      opacity: 1
-        }
+      opacity: 1;
     }
+  }
 
   .hover\:border-b_black {
     &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black)
-        }
+      border-bottom-color: var(--colors-black);
     }
+  }
 
   .hover\:opacity_1 {
     &:where(:hover, [data-hover]) {
-      opacity: 1
-        }
+      opacity: 1;
     }
+  }
 
   .hover\:border-b_black {
     &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black)
-        }
+      border-bottom-color: var(--colors-black);
     }
+  }
 
   .text_red\.400 {
-    color: var(--colors-red-400)
-    }
+    color: var(--colors-red-400);
+  }
 
   .hover\:opacity_1 {
     &:where(:hover, [data-hover]) {
-      opacity: 1
-        }
+      opacity: 1;
     }
+  }
 
   .hover\:border-b_black {
     &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black)
-        }
+      border-bottom-color: var(--colors-black);
     }
+  }
 
   .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
-    }
+    border-bottom: 1px solid transparent;
+  }
 
   .cursor_pointer {
-    cursor: pointer
-    }
+    cursor: pointer;
+  }
 
   .hover\:opacity_1 {
     &:where(:hover, [data-hover]) {
-      opacity: 1
-        }
+      opacity: 1;
     }
+  }
 
   .hover\:border-b_black {
     &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black)
-        }
+      border-bottom-color: var(--colors-black);
     }
+  }
 
   .self_flex-start {
-    align-self: flex-start
-    }
+    align-self: flex-start;
+  }
 
   .mr_2 {
-    margin-right: var(--spacing-2)
-    }}
+    margin-right: var(--spacing-2);
+  }
+}