@pandacss/studio 0.30.2 → 0.32.0

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

@@ -178,79 +178,79 @@ export interface Conditions {
 	"_horizontal": string
 	/** `&[data-orientation=vertical]` */
 	"_vertical": string
-	/** `@media screen and (min-width: 40em)` */
+	/** `@media screen and (min-width: 40rem)` */
 	"sm": string
-	/** `@media screen and (min-width: 40em) and (max-width: 47.9975em)` */
+	/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
 	"smOnly": string
-	/** `@media screen and (max-width: 39.9975em)` */
+	/** `@media screen and (max-width: 39.9975rem)` */
 	"smDown": string
-	/** `@media screen and (min-width: 48em)` */
+	/** `@media screen and (min-width: 48rem)` */
 	"md": string
-	/** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */
+	/** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */
 	"mdOnly": string
-	/** `@media screen and (max-width: 47.9975em)` */
+	/** `@media screen and (max-width: 47.9975rem)` */
 	"mdDown": string
-	/** `@media screen and (min-width: 64em)` */
+	/** `@media screen and (min-width: 64rem)` */
 	"lg": string
-	/** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */
+	/** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
 	"lgOnly": string
-	/** `@media screen and (max-width: 63.9975em)` */
+	/** `@media screen and (max-width: 63.9975rem)` */
 	"lgDown": string
-	/** `@media screen and (min-width: 80em)` */
+	/** `@media screen and (min-width: 80rem)` */
 	"xl": string
-	/** `@media screen and (min-width: 80em) and (max-width: 95.9975em)` */
+	/** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */
 	"xlOnly": string
-	/** `@media screen and (max-width: 79.9975em)` */
+	/** `@media screen and (max-width: 79.9975rem)` */
 	"xlDown": string
-	/** `@media screen and (min-width: 96em)` */
+	/** `@media screen and (min-width: 96rem)` */
 	"2xl": string
-	/** `@media screen and (min-width: 96em)` */
+	/** `@media screen and (min-width: 96rem)` */
 	"2xlOnly": string
-	/** `@media screen and (max-width: 95.9975em)` */
+	/** `@media screen and (max-width: 95.9975rem)` */
 	"2xlDown": string
-	/** `@media screen and (min-width: 40em) and (max-width: 47.9975em)` */
+	/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
 	"smToMd": string
-	/** `@media screen and (min-width: 40em) and (max-width: 63.9975em)` */
+	/** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */
 	"smToLg": string
-	/** `@media screen and (min-width: 40em) and (max-width: 79.9975em)` */
+	/** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */
 	"smToXl": string
-	/** `@media screen and (min-width: 40em) and (max-width: 95.9975em)` */
+	/** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */
 	"smTo2xl": string
-	/** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */
+	/** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */
 	"mdToLg": string
-	/** `@media screen and (min-width: 48em) and (max-width: 79.9975em)` */
+	/** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */
 	"mdToXl": string
-	/** `@media screen and (min-width: 48em) and (max-width: 95.9975em)` */
+	/** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */
 	"mdTo2xl": string
-	/** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */
+	/** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
 	"lgToXl": string
-	/** `@media screen and (min-width: 64em) and (max-width: 95.9975em)` */
+	/** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */
 	"lgTo2xl": string
-	/** `@media screen and (min-width: 80em) and (max-width: 95.9975em)` */
+	/** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */
 	"xlTo2xl": string
-	/** `@container  (min-width: 20em)` */
+	/** `@container  (min-width: 20rem)` */
 	"@/xs": string
-	/** `@container  (min-width: 24em)` */
+	/** `@container  (min-width: 24rem)` */
 	"@/sm": string
-	/** `@container  (min-width: 28em)` */
+	/** `@container  (min-width: 28rem)` */
 	"@/md": string
-	/** `@container  (min-width: 32em)` */
+	/** `@container  (min-width: 32rem)` */
 	"@/lg": string
-	/** `@container  (min-width: 36em)` */
+	/** `@container  (min-width: 36rem)` */
 	"@/xl": string
-	/** `@container  (min-width: 42em)` */
+	/** `@container  (min-width: 42rem)` */
 	"@/2xl": string
-	/** `@container  (min-width: 48em)` */
+	/** `@container  (min-width: 48rem)` */
 	"@/3xl": string
-	/** `@container  (min-width: 56em)` */
+	/** `@container  (min-width: 56rem)` */
 	"@/4xl": string
-	/** `@container  (min-width: 64em)` */
+	/** `@container  (min-width: 64rem)` */
 	"@/5xl": string
-	/** `@container  (min-width: 72em)` */
+	/** `@container  (min-width: 72rem)` */
 	"@/6xl": string
-	/** `@container  (min-width: 80em)` */
+	/** `@container  (min-width: 80rem)` */
 	"@/7xl": string
-	/** `@container  (min-width: 90em)` */
+	/** `@container  (min-width: 90rem)` */
 	"@/8xl": string
 	/** The base (=no conditions) styles to apply  */
 	"base": string

package/styled-system/types/prop-type.d.ts

@@ -89,6 +89,7 @@ interface PropertyValueTypes {
 	textEmphasisColor: Tokens["colors"];
 	textIndent: Tokens["spacing"];
 	textShadow: Tokens["shadows"];
+	textShadowColor: Tokens["colors"];
 	textWrap: "wrap" | "balance" | "nowrap";
 	truncate: boolean;
 	listStyleImage: Tokens["assets"];
@@ -264,6 +265,7 @@ interface PropertyValueTypes {
 	h: Shorthand<"height">;
 	minH: Shorthand<"minHeight">;
 	maxH: Shorthand<"maxHeight">;
+	textShadowColor: Shorthand<"textShadowColor">;
 	bgPosition: Shorthand<"backgroundPosition">;
 	bgPositionX: Shorthand<"backgroundPositionX">;
 	bgPositionY: Shorthand<"backgroundPositionY">;

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

@@ -14,10 +14,21 @@ export type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends k
 
 export type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string
 
+/**
+ * Extract the variant as optional props from a `cva` function.
+ * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.
+ */
 export type RecipeVariantProps<
   T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,
 > = Pretty<Parameters<T>[0]>
 
+/**
+ * Extract the variants from a `cva` function.
+ */
+export type RecipeVariant<
+  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,
+> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>
+
 type RecipeVariantMap<T extends RecipeVariantRecord> = {
   [K in keyof T]: Array<keyof T[K]>
 }
@@ -64,10 +75,6 @@ export interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantR
    * The styles to apply when a combination of variants is selected.
    */
   compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]
-  /**
-   * Variants to pre-generate, will be include in the final `config.staticCss`
-   */
-  staticCss?: RecipeRule[]
 }
 
 export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
@@ -88,6 +95,10 @@ interface RecipeConfigMeta {
    * @example ['Button', 'Link', /Button$/]
    */
   jsx?: Array<string | RegExp>
+  /**
+   * Variants to pre-generate, will be include in the final `config.staticCss`
+   */
+  staticCss?: RecipeRule[]
 }
 
 export interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>
@@ -142,10 +153,6 @@ export interface SlotRecipeDefinition<
    * The styles to apply when a combination of variants is selected.
    */
   compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]
-  /**
-   * Variants to pre-generate, will be include in the final `config.staticCss`
-   */
-  staticCss?: RecipeRule[]
 }
 
 export type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(

package/styled-system/types/style-props.d.ts

@@ -51,6 +51,9 @@ export interface SystemProperties {
 	animationIterationCount?: PropertyValue<'animationIterationCount'>
 	animationName?: PropertyValue<'animationName'>
 	animationPlayState?: PropertyValue<'animationPlayState'>
+	animationRange?: PropertyValue<'animationRange'>
+	animationRangeEnd?: PropertyValue<'animationRangeEnd'>
+	animationRangeStart?: PropertyValue<'animationRangeStart'>
 	animationTimingFunction?: PropertyValue<'animationTimingFunction'>
 	animationTimeline?: PropertyValue<'animationTimeline'>
 	appearance?: PropertyValue<'appearance'>
@@ -70,7 +73,6 @@ export interface SystemProperties {
 	backgroundPositionY?: PropertyValue<'backgroundPositionY'>
 	backgroundRepeat?: PropertyValue<'backgroundRepeat'>
 	backgroundSize?: PropertyValue<'backgroundSize'>
-	blockOverflow?: PropertyValue<'blockOverflow'>
 	blockSize?: PropertyValue<'blockSize'>
 	border?: PropertyValue<'border'>
 	borderBlock?: PropertyValue<'borderBlock'>
@@ -208,6 +210,10 @@ export interface SystemProperties {
 	fontStretch?: PropertyValue<'fontStretch'>
 	fontStyle?: PropertyValue<'fontStyle'>
 	fontSynthesis?: PropertyValue<'fontSynthesis'>
+	fontSynthesisPosition?: PropertyValue<'fontSynthesisPosition'>
+	fontSynthesisSmallCaps?: PropertyValue<'fontSynthesisSmallCaps'>
+	fontSynthesisStyle?: PropertyValue<'fontSynthesisStyle'>
+	fontSynthesisWeight?: PropertyValue<'fontSynthesisWeight'>
 	fontVariant?: PropertyValue<'fontVariant'>
 	fontVariantAlternates?: PropertyValue<'fontVariantAlternates'>
 	fontVariantCaps?: PropertyValue<'fontVariantCaps'>
@@ -340,6 +346,7 @@ export interface SystemProperties {
 	overflowWrap?: PropertyValue<'overflowWrap'>
 	overflowX?: PropertyValue<'overflowX'>
 	overflowY?: PropertyValue<'overflowY'>
+	overlay?: PropertyValue<'overlay'>
 	overscrollBehavior?: PropertyValue<'overscrollBehavior'>
 	overscrollBehaviorBlock?: PropertyValue<'overscrollBehaviorBlock'>
 	overscrollBehaviorInline?: PropertyValue<'overscrollBehaviorInline'>
@@ -445,6 +452,8 @@ export interface SystemProperties {
 	textTransform?: PropertyValue<'textTransform'>
 	textUnderlineOffset?: PropertyValue<'textUnderlineOffset'>
 	textUnderlinePosition?: PropertyValue<'textUnderlinePosition'>
+	textWrap?: PropertyValue<'textWrap'>
+	timelineScope?: PropertyValue<'timelineScope'>
 	top?: PropertyValue<'top'>
 	touchAction?: PropertyValue<'touchAction'>
 	transform?: PropertyValue<'transform'>
@@ -452,6 +461,7 @@ export interface SystemProperties {
 	transformOrigin?: PropertyValue<'transformOrigin'>
 	transformStyle?: PropertyValue<'transformStyle'>
 	transition?: PropertyValue<'transition'>
+	transitionBehavior?: PropertyValue<'transitionBehavior'>
 	transitionDelay?: PropertyValue<'transitionDelay'>
 	transitionDuration?: PropertyValue<'transitionDuration'>
 	transitionProperty?: PropertyValue<'transitionProperty'>
@@ -460,9 +470,14 @@ export interface SystemProperties {
 	unicodeBidi?: PropertyValue<'unicodeBidi'>
 	userSelect?: PropertyValue<'userSelect'>
 	verticalAlign?: PropertyValue<'verticalAlign'>
+	viewTimeline?: PropertyValue<'viewTimeline'>
+	viewTimelineAxis?: PropertyValue<'viewTimelineAxis'>
+	viewTimelineInset?: PropertyValue<'viewTimelineInset'>
+	viewTimelineName?: PropertyValue<'viewTimelineName'>
 	viewTransitionName?: PropertyValue<'viewTransitionName'>
 	visibility?: PropertyValue<'visibility'>
 	whiteSpace?: PropertyValue<'whiteSpace'>
+	whiteSpaceCollapse?: PropertyValue<'whiteSpaceCollapse'>
 	widows?: PropertyValue<'widows'>
 	width?: PropertyValue<'width'>
 	willChange?: PropertyValue<'willChange'>
@@ -544,6 +559,7 @@ export interface SystemProperties {
 	h?: PropertyValue<'h'>
 	minH?: PropertyValue<'minH'>
 	maxH?: PropertyValue<'maxH'>
+	textShadowColor?: PropertyValue<'textShadowColor'>
 	bgPosition?: PropertyValue<'bgPosition'>
 	bgPositionX?: PropertyValue<'bgPositionX'>
 	bgPositionY?: PropertyValue<'bgPositionY'>
@@ -597,7 +613,6 @@ export interface SystemProperties {
 	divideColor?: PropertyValue<'divideColor'>
 	divideStyle?: PropertyValue<'divideStyle'>
 	fontSmoothing?: PropertyValue<'fontSmoothing'>
-	textWrap?: PropertyValue<'textWrap'>
 	truncate?: PropertyValue<'truncate'>
 	backgroundGradient?: PropertyValue<'backgroundGradient'>
 	textGradient?: PropertyValue<'textGradient'>

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

@@ -1,10 +0,0 @@
-/* eslint-disable */
-import type { FunctionComponent } from 'react'
-import type { StyledLinkProperties } from '../patterns/styled-link';
-import type { HTMLPandaProps } from '../types/jsx';
-import type { DistributiveOmit } from '../types/system-types';
-
-export interface StyledLinkProps extends StyledLinkProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof StyledLinkProperties > {}
-
-
-export declare const StyledLink: FunctionComponent<StyledLinkProps>

package/styled-system/jsx/styled-link.mjs

@@ -1,14 +0,0 @@
-import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
-import { splitProps } from '../helpers.mjs';
-import { getStyledLinkStyle } from '../patterns/styled-link.mjs';
-import { panda } from './factory.mjs';
-
-export const StyledLink = /* @__PURE__ */ forwardRef(function StyledLink(props, ref) {
-  const [patternProps, restProps] = splitProps(props, [])
-
-const styleProps = getStyledLinkStyle(patternProps)
-const mergedProps = { ref, ...styleProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })

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

@@ -1,21 +0,0 @@
-/* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types/index';
-import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
-import type { DistributiveOmit } from '../types/system-types';
-import type { Tokens } from '../tokens/index';
-
-export interface StyledLinkProperties {
-   
-}
-
-
-interface StyledLinkStyles extends StyledLinkProperties, DistributiveOmit<SystemStyleObject, keyof StyledLinkProperties > {}
-
-interface StyledLinkPatternFn {
-  (styles?: StyledLinkStyles): string
-  raw: (styles?: StyledLinkStyles) => SystemStyleObject
-}
-
-
-export declare const styledLink: StyledLinkPatternFn;

package/styled-system/patterns/styled-link.mjs

@@ -1,18 +0,0 @@
-import { mapObject } from '../helpers.mjs';
-import { css } from '../css/index.mjs';
-
-const styledLinkConfig = {
-transform:(props) => ({
-  display: "inline-flex",
-  alignItems: "center",
-  opacity: "0.5",
-  borderBottom: "1px solid transparent",
-  cursor: "pointer",
-  _hover: { opacity: 1, borderBottomColor: "black" },
-  ...props
-})}
-
-export const getStyledLinkStyle = (styles = {}) => styledLinkConfig.transform(styles, { map: mapObject })
-
-export const styledLink = (styles) => css(getStyledLinkStyle(styles))
-styledLink.raw = getStyledLinkStyle