@pandacss/studio 0.3.0 → 0.3.1

package/styled-system/styles.css

@@ -11,6 +11,10 @@
 @import './tokens/keyframes.css';
 
 @layer utilities {
+  .w_26px {
+    width: 26px;
+  }
+
   .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -23,44 +27,24 @@
     margin: var(--spacing-4);
   }
 
-  .border_1px_solid_token\(colors\.blue\.400\,_blue\) {
-    border: 1px solid var(--colors-blue-400, blue);
-  }
-
-  .border_1px_solid_token\(colors\.border\,_blue\) {
-    border: 1px solid var(--colors-border, blue);
-  }
-
-  .transition_all_\.2s_ease {
-    transition: all 0.2s ease;
-  }
-
-  .transition_outline_\.2s_ease {
-    transition: outline 0.2s ease;
-  }
-
-  .highlighted\:opacity_0\.8[data-highlighted] {
-    opacity: 0.8;
-  }
-
-  .highlighted\:ring_1px_solid_token\(colors\.blue\.400\,_blue\)[data-highlighted] {
-    outline: 1px solid var(--colors-blue-400, blue);
-  }
-
   .max-h_300px {
     max-height: 300px;
   }
 
-  .border_1px_solid_token\(colors\.border\) {
-    border: 1px solid var(--colors-border);
+  .word-wrap_break-word {
+    word-wrap: break-word;
   }
 
   .highlighted\:bg_border[data-highlighted] {
     background: var(--colors-border);
   }
 
-  .mr_-2 {
-    margin-right: calc(var(--spacing-2) * -1);
+  .border_solid_1px {
+    border: solid 1px;
+  }
+
+  .border-l_solid_1px {
+    border-left: solid 1px;
   }
 
   .max-w_14px {
@@ -71,8 +55,8 @@
     flex-shrink: 0;
   }
 
-  .border_border {
-    border: border;
+  .border_1px_solid_token\(colors\.border\) {
+    border: 1px solid var(--colors-border);
   }
 
   .text_red\.400 {
@@ -95,18 +79,10 @@
     margin-left: var(--spacing-1);
   }
 
-  .bg_white {
-    background-color: var(--colors-white);
-  }
-
   .bg_card {
     background-color: var(--colors-card);
   }
 
-  .bg_gray\.50 {
-    background: var(--colors-gray-50);
-  }
-
   .p_16 {
     padding: var(--spacing-16);
   }
@@ -115,14 +91,18 @@
     margin-top: var(--spacing-1);
   }
 
-  .self_flex-end {
-    align-self: flex-end;
-  }
-
   .select_none {
     user-select: none;
   }
 
+  .px_3 {
+    padding-inline: var(--spacing-3);
+  }
+
+  .h_16 {
+    height: var(--sizes-16);
+  }
+
   .pt_16 {
     padding-top: var(--spacing-16);
   }
@@ -176,10 +156,6 @@
     margin-bottom: var(--spacing-2);
   }
 
-  .opacity_0\.1 {
-    opacity: 0.1;
-  }
-
   .h_10 {
     height: var(--sizes-10);
   }
@@ -236,6 +212,10 @@
     grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
   }
 
+  .grid-cols_repeat\(auto-fit\,_minmax\(30rem\,_1fr\)\) {
+    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
+  }
+
   .my_5 {
     margin-block: var(--spacing-5);
   }
@@ -272,10 +252,6 @@
     font-size: 24px;
   }
 
-  .text_uppercase {
-    text-transform: uppercase;
-  }
-
   .justify_center {
     justify-content: center;
   }
@@ -374,6 +350,10 @@
     width: var(--sizes-60);
   }
 
+  .p_4 {
+    padding: var(--spacing-4);
+  }
+
   .\[\&_svg\]\:font_normal svg {
     font-weight: var(--font-weights-normal);
   }
@@ -486,6 +466,10 @@
     border-color: var(--colors-neutral-700);
   }
 
+  .text_uppercase {
+    text-transform: uppercase;
+  }
+
   .d_block {
     display: block;
   }
@@ -624,22 +608,6 @@
     padding-block: 20px;
   }
 
-  .p_4 {
-    padding: var(--spacing-4);
-  }
-
-  .debug_true {
-    outline: 1px solid blue !important;
-  }
-
-  .debug_true > * {
-    outline: 1px solid red !important;
-  }
-
-  .bg_white {
-    background: var(--colors-white);
-  }
-
   .p_4px_8px {
     padding: 4px 8px;
   }
@@ -668,12 +636,8 @@
     width: 100%;
   }
 
-  .w_26px {
-    width: 26px;
-  }
-
-  .text_text {
-    color: var(--colors-text);
+  .w_5 {
+    width: var(--sizes-5);
   }
 
   .ml_auto {
@@ -716,10 +680,6 @@
     padding: 0;
   }
 
-  .rounded_md {
-    border-radius: var(--radii-md);
-  }
-
   .py_2 {
     padding-block: var(--spacing-2);
   }
@@ -728,6 +688,10 @@
     transition: all 0.2s ease;
   }
 
+  .rounded_md {
+    border-radius: var(--radii-md);
+  }
+
   .bg_none {
     background: none;
   }
@@ -744,6 +708,10 @@
     padding-right: var(--spacing-4);
   }
 
+  .text_text {
+    color: var(--colors-text);
+  }
+
   .mb_4 {
     margin-bottom: var(--spacing-4);
   }
@@ -944,6 +912,15 @@
     width: var(--sizes-full);
   }
 
+  .focusWithin\:border_yellow\.200:focus-within {
+    border-color: var(--colors-yellow-200);
+  }
+
+  .focusWithin\:dark\:border_yellow\.300:focus-within.dark,
+  .dark .focusWithin\:dark\:border_yellow\.300:focus-within {
+    border-color: var(--colors-yellow-300);
+  }
+
   .focusWithin\:outline-style_solid:focus-within {
     outline-style: solid;
   }
@@ -960,12 +937,13 @@
     outline-color: var(--colors-neutral-400);
   }
 
-  .focus\:border_1px_solid_token\(colors\.blue\.400\,_blue\):where(:focus, [data-focus]) {
-    border: 1px solid var(--colors-blue-400, blue);
+  .focus\:ring_none:where(:focus, [data-focus]) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
   }
 
-  .hover\:border_1px_solid_token\(colors\.blue\.400\,_blue\):where(:hover, [data-hover]) {
-    border: 1px solid var(--colors-blue-400, blue);
+  .hover\:bg_gray\.100:where(:hover, [data-hover]) {
+    background-color: var(--colors-gray-100);
   }
 
   .hover\:shadow_lg:where(:hover, [data-hover]) {
@@ -976,18 +954,6 @@
     color: var(--colors-yellow-300);
   }
 
-  .hover\:bg_bg:where(:hover, [data-hover]) {
-    background: var(--colors-bg);
-  }
-
-  .hover\:bg_gray\.50:where(:hover, [data-hover]) {
-    background-color: var(--colors-gray-50);
-  }
-
-  .hover\:bg_gray\.100:where(:hover, [data-hover]) {
-    background-color: var(--colors-gray-100);
-  }
-
   .hover\:opacity_0\.8:where(:hover, [data-hover]) {
     opacity: 0.8;
   }
@@ -996,8 +962,12 @@
     background-color: var(--colors-border);
   }
 
-  .hover\:bg_gray\.100:where(:hover, [data-hover]) {
-    background: var(--colors-gray-100);
+  .hover\:bg_border:where(:hover, [data-hover]) {
+    background: var(--colors-border);
+  }
+
+  .hover\:opacity_0\.6:where(:hover, [data-hover]) {
+    opacity: 0.6;
   }
 
   .hover\:opacity_1:where(:hover, [data-hover]) {

package/styled-system/types/pattern.d.ts

@@ -14,7 +14,11 @@ export type PatternHelpers = {
   map: (value: any, fn: (value: string) => string | undefined) => any
 }
 
-export type PatternConfig<T = PatternProperty> = {
+type PatternProperties = Record<string, PatternProperty>
+
+type Props<T> = Record<LiteralUnion<keyof T>, any>
+
+export type PatternConfig<T extends PatternProperties = PatternProperties> = {
   /**
    * The description of the pattern. This will be used in the JSDoc comment.
    */
@@ -27,14 +31,11 @@ export type PatternConfig<T = PatternProperty> = {
   /**
    * The properties of the pattern.
    */
-  properties: T extends Record<string, PatternProperty> ? T : Record<string, PatternProperty>
+  properties: T
   /**
    * The css object this pattern will generate.
    */
-  transform?: (
-    props: T extends Record<infer Keys, PatternProperty> ? Record<Keys, any> : Record<string, PatternProperty>,
-    helpers: PatternHelpers,
-  ) => SystemStyleObject
+  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject
   /**
    * The jsx element name this pattern will generate.
    */

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

@@ -1,8 +0,0 @@
-import type { FunctionComponent } from 'react'
-import type { AbsoluteCenterProperties } from '../patterns/absolute-center'
-import type { HTMLPandaProps } from '../types/jsx'
-
-export type AbsoluteCenterProps = AbsoluteCenterProperties & Omit<HTMLPandaProps<'div'>, keyof AbsoluteCenterProperties >
-
-
-export declare const AbsoluteCenter: FunctionComponent<AbsoluteCenterProps>

package/styled-system/jsx/absolute-center.mjs

@@ -1,9 +0,0 @@
-import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs'
-import { getAbsoluteCenterStyle } from '../patterns/absolute-center.mjs'
-
-export const AbsoluteCenter = forwardRef(function AbsoluteCenter(props, ref) {
-  const { axis, ...restProps } = props
-  const styleProps = getAbsoluteCenterStyle({ axis })
-  return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})

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

@@ -1,14 +0,0 @@
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { PropertyValue } from '../types/prop-type'
-import type { Properties } from '../types/csstype'
-import type { Tokens } from '../tokens'
-
-export type AbsoluteCenterProperties = {
-   axis?: ConditionalValue<"x" | "y" | "both">
-}
-
-
-type AbsoluteCenterOptions = AbsoluteCenterProperties & Omit<SystemStyleObject, keyof AbsoluteCenterProperties >
-
-
-export declare function absoluteCenter(options?: AbsoluteCenterOptions): string

package/styled-system/patterns/absolute-center.mjs

@@ -1,23 +0,0 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
-
-const absoluteCenterConfig = {
-  transform(props, { map }) {
-    const { axis = 'both', ...rest } = props
-    return {
-      position: 'absolute',
-      insetBlockStart: map(axis, (v) => (v === 'x' ? 'auto' : '50%')),
-      insetInlineStart: map(axis, (v) => (v === 'y' ? 'auto' : '50%')),
-      transform: map(axis, (v) =>
-        v === 'both' ? 'translate(-50%, -50%)' : v === 'x' ? 'translateX(-50%)' : 'translateY(-50%)',
-      ),
-      maxWidth: '100%',
-      maxHeight: '100%',
-      ...rest,
-    }
-  },
-}
-
-export const getAbsoluteCenterStyle = (styles = {}) => absoluteCenterConfig.transform(styles, { map: mapObject })
-
-export const absoluteCenter = (styles) => css(getAbsoluteCenterStyle(styles))