@stokelp/styled-system 2.93.0 → 2.94.0

package/types/conditions.d.ts

@@ -20,7 +20,7 @@ export interface Conditions {
 	"_visited": string
 	/** `&:target` */
 	"_target": string
-	/** `&:is(:read-only, [data-read-only])` */
+	/** `&:is(:read-only, [data-read-only], [aria-readonly=true])` */
 	"_readOnly": string
 	/** `&:read-write` */
 	"_readWrite": string
@@ -48,7 +48,7 @@ export interface Conditions {
 	"_firstLetter": string
 	/** `&::first-line` */
 	"_firstLine": string
-	/** `&::marker` */
+	/** `&::marker, &::-webkit-details-marker` */
 	"_marker": string
 	/** `&::selection` */
 	"_selection": string
@@ -82,7 +82,7 @@ export interface Conditions {
 	"_peerFocusWithin": string
 	/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */
 	"_peerFocusVisible": string
-	/** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */
+	/** `.peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &` */
 	"_peerDisabled": string
 	/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */
 	"_peerChecked": string
@@ -102,13 +102,13 @@ export interface Conditions {
 	"_groupFocusWithin": string
 	/** `.group:is(:focus-visible, [data-focus-visible]) &` */
 	"_groupFocusVisible": string
-	/** `.group:is(:disabled, [disabled], [data-disabled]) &` */
+	/** `.group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &` */
 	"_groupDisabled": string
 	/** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */
 	"_groupChecked": string
 	/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */
 	"_groupExpanded": string
-	/** `.group:is(:invalid, [data-invalid]) &` */
+	/** `.group:is(:invalid, [data-invalid], [aria-invalid=true]) &` */
 	"_groupInvalid": string
 	/** `&:where(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])` */
 	"_indeterminate": string
@@ -196,9 +196,9 @@ export interface Conditions {
 	"_lessContrast": string
 	/** `@media (prefers-contrast: more)` */
 	"_moreContrast": string
-	/** `[dir=ltr] &` */
+	/** `:where([dir=ltr], :dir(ltr)) &` */
 	"_ltr": string
-	/** `[dir=rtl] &` */
+	/** `:where([dir=rtl], :dir(rtl)) &` */
 	"_rtl": string
 	/** `&::-webkit-scrollbar` */
 	"_scrollbar": string
@@ -214,6 +214,10 @@ export interface Conditions {
 	"_icon": string
 	/** `@starting-style` */
 	"_starting": string
+	/** `@media (scripting: none)` */
+	"_noscript": string
+	/** `@media (inverted-colors: inverted)` */
+	"_invertedColors": string
 	/** `&:where([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])` */
 	"_collapsed": string
 	/** `@media screen and (min-width: 37.5rem)` */

package/types/jsx.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { ComponentPropsWithoutRef, ElementType, ElementRef, JSX, Ref } from 'react'
+import type { ElementType, JSX, ComponentPropsWithRef, ComponentType, Component } from 'react'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe';
 import type { Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty } from './system-types';
 
@@ -7,26 +7,41 @@ interface Dict {
   [k: string]: unknown
 }
 
-export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>>
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
+export type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
+  ? JSX.LibraryManagedAttributes<T, P>
+  : ComponentPropsWithRef<T>
+
 export interface StyledComponent<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
   __type: any
 }
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
-  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+  defaultProps?: Partial<TProps>
+  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
+  forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends StyledComponent<infer A, infer B>
   ? StyledComponent<A, Pretty<DistributiveUnion<P, B>>>
@@ -47,6 +62,6 @@ export type JsxElements = {
 
 export type Styled = JsxFactory & JsxElements
 
-export type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type StyledVariantProps<T extends StyledComponent<any, any>> = T extends StyledComponent<any, infer Props> ? Props : never

package/types/prop-type.d.ts

@@ -57,6 +57,12 @@ export interface UtilityValues {
 	outlineColor: Tokens["colors"];
 	outline: Tokens["borders"];
 	outlineOffset: Tokens["spacing"];
+	focusRing: "outside" | "inside" | "mixed" | "none";
+	focusVisibleRing: "outside" | "inside" | "mixed" | "none";
+	focusRingColor: Tokens["colors"];
+	focusRingOffset: Tokens["spacing"];
+	focusRingWidth: CssProperties["outlineWidth"];
+	focusRingStyle: CssProperties["outlineStyle"];
 	divideColor: Tokens["colors"];
 	divideStyle: CssProperties["borderStyle"];
 	width: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
@@ -71,6 +77,7 @@ export interface UtilityValues {
 	minBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
 	maxHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
 	maxBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
+	boxSize: Tokens["sizes"];
 	color: Tokens["colors"];
 	fontFamily: Tokens["fonts"];
 	fontSize: Tokens["fontSizes"];
@@ -87,6 +94,7 @@ export interface UtilityValues {
 	background: Tokens["colors"];
 	backgroundColor: Tokens["colors"];
 	backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	backgroundLinear: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	gradientFrom: Tokens["colors"];
 	gradientTo: Tokens["colors"];
@@ -140,7 +148,8 @@ export interface UtilityValues {
 	transitionTimingFunction: Tokens["easings"];
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
-	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
+	transitionProperty: "common" | "colors" | "size" | "position" | "background";
+	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
 	animationName: "blob" | "bounce" | "fade-in" | "fade-out" | "slide-from-top" | "slide-from-bottom" | "slide-from-left" | "slide-from-right" | "slide-to-top" | "slide-to-bottom" | "slide-to-left" | "slide-to-right" | "fadeIn" | "fadeInFromRight" | "fadeInFromLeft" | "fadeInFromBottom" | "fadeInSkew" | "fadeOut" | "fadeOutFromRight" | "fadeOutSkew" | "ping" | "pulse" | "skeleton-pulse" | "slide-in" | "slide-in-left" | "slide-in-modal" | "slide-in-top-modal" | "slide-in-right" | "slide-out" | "slide-out-left" | "slide-out-modal" | "slide-out-top-modal" | "slide-out-right" | "slideInFromBottom" | "slideOutToBottom" | "collapse-in" | "collapse-out" | "spin";
 	animationTimingFunction: Tokens["easings"];
@@ -194,7 +203,6 @@ export interface UtilityValues {
 	srOnly: boolean;
 	debug: boolean;
 	containerName: CssProperties["containerName"];
-	boxSize: Tokens["sizes"];
 	colorPalette: "black" | "current" | "transparent" | "white" | "purple" | "blue" | "grey" | "red" | "green" | "yellow" | "decorative" | "decorative.red" | "decorative.blue" | "decorative.yellow" | "decorative.purple" | "decorative.green" | "decorative.brown" | "typology" | "typology.fish" | "typology.meat" | "typology.fruit" | "typology.vegetable" | "typology.cereal" | "typology.oil" | "typology.aromatic" | "primary" | "secondary" | "error" | "success" | "warning" | "text";
 	textStyle: "body.lg" | "body.md" | "body.sm" | "heading.h1" | "heading.h2" | "heading.h3" | "heading.h4" | "heading.h5" | "heading.h6";
 }

package/types/style-props.d.ts

@@ -8,8 +8,7 @@ type AnyString = (string & {})
 type CssVars = `var(--${string})`
 type CssVarValue = ConditionalValue<Token | AnyString | (number & {})>
 
-type CssVarName =  | AnyString
-type CssVarKeys = `--${CssVarName}`
+type CssVarKeys = `--${string}` & {}
 
 export type CssVarProperties = {
   [key in CssVarKeys]?: CssVarValue
@@ -5908,7 +5907,7 @@ transitionDuration?: ConditionalValue<UtilityValues["transitionDuration"] | CssV
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/transition-property
    */
-transitionProperty?: ConditionalValue<CssProperties["transitionProperty"] | AnyString>
+transitionProperty?: ConditionalValue<UtilityValues["transitionProperty"] | CssVars | CssProperties["transitionProperty"] | AnyString>
  /**
    * The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
    *
@@ -6993,6 +6992,9 @@ bgBlendMode?: ConditionalValue<CssProperties["backgroundBlendMode"] | AnyString>
    */
 bgSize?: ConditionalValue<CssProperties["backgroundSize"] | AnyString>
  bgGradient?: ConditionalValue<UtilityValues["backgroundGradient"] | CssVars | AnyString>
+ bgLinear?: ConditionalValue<UtilityValues["backgroundLinear"] | CssVars | AnyString>
+ bgRadial?: ConditionalValue<string | number | AnyString>
+ bgConic?: ConditionalValue<string | number | AnyString>
  /**
    * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
    *
@@ -7360,13 +7362,23 @@ scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars
  hideBelow?: ConditionalValue<UtilityValues["hideBelow"] | CssVars | AnyString>
  spaceX?: ConditionalValue<UtilityValues["spaceX"] | CssVars | AnyString>
  spaceY?: ConditionalValue<UtilityValues["spaceY"] | CssVars | AnyString>
+ focusRing?: ConditionalValue<UtilityValues["focusRing"] | CssVars | AnyString>
+ focusVisibleRing?: ConditionalValue<UtilityValues["focusVisibleRing"] | CssVars | AnyString>
+ focusRingColor?: ConditionalValue<UtilityValues["focusRingColor"] | CssVars | AnyString>
+ focusRingOffset?: ConditionalValue<UtilityValues["focusRingOffset"] | CssVars | AnyString>
+ focusRingWidth?: ConditionalValue<UtilityValues["focusRingWidth"] | CssVars | AnyString>
+ focusRingStyle?: ConditionalValue<UtilityValues["focusRingStyle"] | CssVars | AnyString>
  divideX?: ConditionalValue<string | number | AnyString>
  divideY?: ConditionalValue<string | number | AnyString>
  divideColor?: ConditionalValue<UtilityValues["divideColor"] | CssVars | AnyString>
  divideStyle?: ConditionalValue<UtilityValues["divideStyle"] | CssVars | AnyString>
+ boxSize?: ConditionalValue<UtilityValues["boxSize"] | CssVars | AnyString>
  fontSmoothing?: ConditionalValue<UtilityValues["fontSmoothing"] | CssVars | AnyString>
  truncate?: ConditionalValue<UtilityValues["truncate"] | CssVars | AnyString>
  backgroundGradient?: ConditionalValue<UtilityValues["backgroundGradient"] | CssVars | AnyString>
+ backgroundLinear?: ConditionalValue<UtilityValues["backgroundLinear"] | CssVars | AnyString>
+ backgroundRadial?: ConditionalValue<string | number | AnyString>
+ backgroundConic?: ConditionalValue<string | number | AnyString>
  textGradient?: ConditionalValue<UtilityValues["textGradient"] | CssVars | AnyString>
  gradientFromPosition?: ConditionalValue<string | number | AnyString>
  gradientToPosition?: ConditionalValue<string | number | AnyString>
@@ -7487,7 +7499,6 @@ scrollSnapMarginLeft?: ConditionalValue<UtilityValues["scrollSnapMarginLeft"] |
 scrollSnapMarginRight?: ConditionalValue<UtilityValues["scrollSnapMarginRight"] | CssVars | AnyString>
  srOnly?: ConditionalValue<UtilityValues["srOnly"] | CssVars | AnyString>
  debug?: ConditionalValue<UtilityValues["debug"] | CssVars | AnyString>
- boxSize?: ConditionalValue<UtilityValues["boxSize"] | CssVars | AnyString>
  colorPalette?: ConditionalValue<UtilityValues["colorPalette"] | CssVars | AnyString>
  textStyle?: ConditionalValue<UtilityValues["textStyle"] | CssVars | AnyString>
 }

package/types/system-types.d.ts

@@ -91,19 +91,95 @@ type PositionTry =
   | DashedIdent
 
 export interface ModernCssProperties {
+  /**
+   * Defines a name for the anchor element that can be referenced by positioned elements.
+   */
   anchorName?: Globals | 'none' | DashedIdent | StringToMultiple<DashedIdent>
+
+  /**
+   * Defines the scope of anchor names within the element.
+   */
   anchorScope?: Globals | 'none' | 'all' | DashedIdent | StringToMultiple<DashedIdent>
+
+  /**
+   * Controls how form elements size themselves.
+   */
   fieldSizing?: Globals | 'fixed' | 'content'
+
+  /**
+   * Controls whether interpolation of size values should allow keywords.
+   */
   interpolateSize?: Globals | 'allow-keywords' | 'numeric-only'
+
+  /**
+   * Specifies the anchor element that this positioned element should be positioned relative to.
+   */
   positionAnchor?: Globals | 'auto' | DashedIdent
+
+  /**
+   * Specifies the area within the anchor element where this positioned element should be placed.
+   */
   positionArea?: Globals | 'auto' | PositionAreaAxis | `${PositionAreaAxis} ${PositionAreaAxis}` | String
+
+  /**
+   * Specifies the position try options for the element.
+   */
   positionTry?: Globals | StringToMultiple<PositionTry> | String
+
+  /**
+   * Specifies fallback position try options when the primary position fails.
+   */
   positionTryFallback?: Globals | 'none' | StringToMultiple<PositionTry> | String
+
+  /**
+   * Specifies the order in which position try options should be attempted.
+   */
   positionTryOrder?: Globals | 'normal' | 'most-width' | 'most-height' | 'most-block-size' | 'most-inline-size'
+
+  /**
+   * Controls when the positioned element should be visible.
+   */
   positionVisibility?: Globals | 'always' | 'anchors-visible' | 'no-overflow'
+
+  /**
+   * Controls whether text should wrap or not.
+   */
   textWrapMode?: Globals | 'wrap' | 'nowrap'
+
+  /**
+   * Controls trimming of spacing in text.
+   */
   textSpacingTrim?: Globals | 'normal' | 'space-all' | 'space-first' | 'trim-start'
+
+  /**
+   * Controls the style of text wrapping.
+   */
   textWrapStyle?: Globals | 'auto' | 'balance' | 'pretty' | 'stable'
+
+  /**
+   * Controls whether the entire element should be draggable instead of its contents.
+   */
+  WebkitUserDrag?: Globals | 'auto' | 'element' | 'none'
+
+  /**
+   * Specifies whether an element can be used to drag the entire app window (Electron).
+   */
+  WebkitAppRegion?: Globals | 'drag' | 'no-drag'
+
+  /**
+   * Sets the horizontal spacing between table borders.
+   */
+  WebkitBorderHorizontalSpacing?: Globals | String | Number
+
+  /**
+   * Sets the vertical spacing between table borders.
+   */
+  WebkitBorderVerticalSpacing?: Globals | String | Number
+
+  /**
+   * Controls the display of text content for security purposes (e.g., password fields).
+   */
+  WebkitTextSecurity?: Globals | 'none' | 'circle' | 'disc' | 'square'
 }
 
 export type CssProperty = keyof PropertiesFallback