@pandacss/studio 0.3.1 → 0.4.0

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__layouts__Sidebar.css

@@ -67,10 +67,6 @@
     min-width: var(--sizes-60);
   }
 
-  .overflow_auto {
-    overflow: auto;
-  }
-
   .px_12 {
     padding-inline: var(--spacing-12);
   }
@@ -99,6 +95,10 @@
     width: var(--sizes-full);
   }
 
+  .overflow_auto {
+    overflow: auto;
+  }
+
   .md\:px_6 {
     @media screen and (min-width: 768px) {
       padding-inline: var(--spacing-6);

package/styled-system/css/css.d.ts

@@ -1,2 +1,3 @@
+/* eslint-disable */
 import type { SystemStyleObject } from '../types'
 export declare function css(styles: SystemStyleObject): string

package/styled-system/css/css.mjs

@@ -265,6 +265,14 @@ const classNameMap = {
   stroke: 'stroke',
   srOnly: 'sr',
   debug: 'debug',
+  appearance: 'appearance',
+  backfaceVisibility: 'backface',
+  clipPath: 'clip-path',
+  hyphens: 'hyphens',
+  mask: 'mask',
+  maskImage: 'mask-image',
+  maskSize: 'mask-size',
+  textSizeAdjust: 'text-size-adjust',
   textStyle: 'textStyle',
 }
 

package/styled-system/css/cva.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { RecipeCreatorFn } from '../types/recipe'
 
 export declare const cva: RecipeCreatorFn

package/styled-system/css/cx.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 type Argument = string | boolean | null | undefined
 
 /** Conditionally join classNames into a single string */

package/styled-system/css/index.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export * from './css'
 export * from './cx'
 export * from './cva'

package/styled-system/global.css

@@ -55,7 +55,7 @@
   }
 
   body {
-    margin: 0;
+    margin: var(--spacing-0);
     min-height: 100vh;
   }
 }

package/styled-system/jsx/aspect-ratio.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { AspectRatioProperties } from '../patterns/aspect-ratio'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/box.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { BoxProperties } from '../patterns/box'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/center.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { CenterProperties } from '../patterns/center'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/circle.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { CircleProperties } from '../patterns/circle'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/container.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { ContainerProperties } from '../patterns/container'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/divider.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { DividerProperties } from '../patterns/divider'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/factory.d.ts

@@ -1,2 +1,3 @@
+/* eslint-disable */
 import { Panda } from '../types/jsx'
 export declare const panda: Panda

package/styled-system/jsx/flex.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { FlexProperties } from '../patterns/flex'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/float.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { FloatProperties } from '../patterns/float'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/grid-item.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { GridItemProperties } from '../patterns/grid-item'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/grid.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { GridProperties } from '../patterns/grid'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/hstack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { HstackProperties } from '../patterns/hstack'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/index.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export * from './factory'
 export * from './box'
 export * from './flex'

package/styled-system/jsx/is-valid-prop.mjs

@@ -348,6 +348,14 @@ var userGenerated = [
   'stroke',
   'srOnly',
   'debug',
+  'appearance',
+  'backfaceVisibility',
+  'clipPath',
+  'hyphens',
+  'mask',
+  'maskImage',
+  'maskSize',
+  'textSizeAdjust',
   'colorPalette',
   'textStyle',
   '_hover',
@@ -682,7 +690,6 @@ var allCssProperties = [
   'clip',
   'clipPath',
   'color',
-  'printColorAdjust',
   'colorScheme',
   'columnCount',
   'columnFill',
@@ -700,6 +707,9 @@ var allCssProperties = [
   'containIntrinsicHeight',
   'containIntrinsicInlineSize',
   'containIntrinsicWidth',
+  'container',
+  'containerName',
+  'containerType',
   'content',
   'contentVisibility',
   'counterIncrement',
@@ -724,6 +734,7 @@ var allCssProperties = [
   'fontKerning',
   'fontLanguageOverride',
   'fontOpticalSizing',
+  'fontPalette',
   'fontVariationSettings',
   'fontSize',
   'fontSizeAdjust',
@@ -735,6 +746,7 @@ var allCssProperties = [
   'fontVariantAlternates',
   'fontVariantCaps',
   'fontVariantEastAsian',
+  'fontVariantEmoji',
   'fontVariantLigatures',
   'fontVariantNumeric',
   'fontVariantPosition',
@@ -878,6 +890,7 @@ var allCssProperties = [
   'paddingLeft',
   'paddingRight',
   'paddingTop',
+  'page',
   'pageBreakAfter',
   'pageBreakBefore',
   'pageBreakInside',
@@ -889,6 +902,7 @@ var allCssProperties = [
   'placeSelf',
   'pointerEvents',
   'position',
+  'printColorAdjust',
   'quotes',
   'resize',
   'right',
@@ -980,6 +994,7 @@ var allCssProperties = [
   'unicodeBidi',
   'userSelect',
   'verticalAlign',
+  'viewTransitionName',
   'visibility',
   'whiteSpace',
   'widows',
@@ -1001,7 +1016,8 @@ function memo(fn) {
     return cache[arg]
   }
 }
+var selectorRegex = /&|@/
 var isCssProperty = memo((prop) => {
-  return properties.has(prop) || prop.startsWith('--')
+  return properties.has(prop) || prop.startsWith('--') || selectorRegex.test(prop)
 })
 export { allCssProperties, isCssProperty }

package/styled-system/jsx/link-box.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { LinkBoxProperties } from '../patterns/link-box'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/link-overlay.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { LinkOverlayProperties } from '../patterns/link-overlay'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/spacer.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { SpacerProperties } from '../patterns/spacer'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/square.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { SquareProperties } from '../patterns/square'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/stack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { StackProperties } from '../patterns/stack'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/styled-link.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { StyledLinkProperties } from '../patterns/styled-link'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/vstack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { VstackProperties } from '../patterns/vstack'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/wrap.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { WrapProperties } from '../patterns/wrap'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/patterns/aspect-ratio.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/aspect-ratio.mjs

@@ -2,17 +2,27 @@ import { mapObject } from '../helpers.mjs'
 import { css } from '../css/index.mjs'
 
 const aspectRatioConfig = {
-  transform(props) {
-    const { ratio, ...rest } = props
+  transform(props, { map }) {
+    const { ratio = 4 / 3, ...rest } = props
     return {
-      aspectRatio: ratio,
-      overflow: 'hidden',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      '&>img, &>video': {
+      position: 'relative',
+      _before: {
+        content: `""`,
+        display: 'block',
+        height: '0',
+        paddingBottom: map(ratio, (r) => `${(1 / r) * 100}%`),
+      },
+      '&>*': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        position: 'absolute',
+        inset: '0',
         width: '100%',
         height: '100%',
+      },
+      '&>img, &>video': {
         objectFit: 'cover',
       },
       ...rest,

package/styled-system/patterns/box.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/center.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/circle.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/container.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/divider.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/divider.mjs

@@ -8,7 +8,7 @@ const dividerConfig = {
       '--thickness': thickness,
       width: map(orientation, (v) => (v === 'vertical' ? void 0 : '100%')),
       height: map(orientation, (v) => (v === 'horizontal' ? void 0 : '100%')),
-      borderInlineStartWidth: map(orientation, (v) => (v === 'horizontal' ? 'var(--thickness)' : void 0)),
+      borderBlockEndWidth: map(orientation, (v) => (v === 'horizontal' ? 'var(--thickness)' : void 0)),
       borderInlineEndWidth: map(orientation, (v) => (v === 'vertical' ? 'var(--thickness)' : void 0)),
       borderColor: color,
       ...rest,

package/styled-system/patterns/flex.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/float.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/grid-item.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/grid.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/hstack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/index.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export * from './box'
 export * from './flex'
 export * from './stack'

package/styled-system/patterns/link-box.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/link-overlay.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/spacer.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/square.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/stack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/styled-link.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/vstack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/wrap.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'