@svadmin/ui 0.70.0 → 0.73.0

package/dist/styled-system/types/index.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+export * from './conditions';
+export * from './pattern';
+export * from './recipe';
+export * from './system-types';
+export * from './style-props';

package/dist/styled-system/types/parts.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+export interface Part {
+  selector: string
+}
+
+export interface Parts {
+  [key: string]: Part
+}

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

@@ -0,0 +1,78 @@
+/* eslint-disable */
+import type {  CssProperty, SystemStyleObject  } from './system-types';
+import type {  TokenCategory  } from '../tokens/index';
+
+type Primitive = string | number | boolean | null | undefined
+type LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)
+
+export type PatternProperty =
+  | { type: 'property'; value: CssProperty; description?: string }
+  | { type: 'enum'; value: string[]; description?: string }
+  | { type: 'token'; value: TokenCategory; property?: CssProperty; description?: string }
+  | { type: 'string' | 'boolean' | 'number'; description?: string }
+
+export interface PatternHelpers {
+  map: (value: any, fn: (value: string) => string | undefined) => any
+  isCssUnit: (value: any) => boolean
+  isCssVar: (value: any) => boolean
+  isCssFunction: (value: any) => boolean
+}
+
+export interface PatternProperties {
+  [key: string]: PatternProperty
+}
+
+type InferProps<T> = Record<LiteralUnion<keyof T>, any>
+
+export type PatternDefaultValue<T> = Partial<InferProps<T>>
+
+export type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>
+
+export interface PatternConfig<T extends PatternProperties = PatternProperties> {
+  /**
+   * The description of the pattern. This will be used in the JSDoc comment.
+   */
+  description?: string
+  /**
+   * The JSX element rendered by the pattern
+   * @default 'div'
+   */
+  jsxElement?: string
+  /**
+   * The properties of the pattern.
+   */
+  properties?: T
+  /**
+   * The default values of the pattern.
+   */
+  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>
+  /**
+   * The css object this pattern will generate.
+   */
+  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject
+  /**
+   * Whether the pattern is deprecated.
+   */
+  deprecated?: boolean | string
+  /**
+   * The jsx element name this pattern will generate.
+   */
+  jsxName?: string
+  /**
+   * The jsx elements to track for this pattern. Can be string or Regexp.
+   *
+   * @default capitalize(pattern.name)
+   * @example ['Button', 'Link', /Button$/]
+   */
+  jsx?: Array<string | RegExp>
+  /**
+   * Whether to only generate types for the specified properties.
+   * This will disallow css properties
+   */
+  strict?: boolean
+  /**
+   * @experimental
+   * Disallow certain css properties for this pattern
+   */
+  blocklist?: LiteralUnion<CssProperty>[]
+}

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

@@ -0,0 +1,223 @@
+/* eslint-disable */
+import type { ConditionalValue } from './conditions';
+import type { CssProperties } from './system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface UtilityValues {
+	top: Tokens["spacing"];
+	left: Tokens["spacing"];
+	inset: "auto" | Tokens["spacing"];
+	insetInline: Tokens["spacing"];
+	insetBlock: Tokens["spacing"];
+	insetBlockEnd: Tokens["spacing"];
+	insetBlockStart: Tokens["spacing"];
+	insetInlineEnd: Tokens["spacing"];
+	insetInlineStart: Tokens["spacing"];
+	right: Tokens["spacing"];
+	bottom: Tokens["spacing"];
+	float: "start" | "end" | CssProperties["float"];
+	flexBasis: 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" | "full";
+	flex: "1" | "auto" | "initial" | "none";
+	gridAutoColumns: "min" | "max" | "fr";
+	gridAutoRows: "min" | "max" | "fr";
+	gap: Tokens["spacing"];
+	gridGap: Tokens["spacing"];
+	gridRowGap: Tokens["spacing"];
+	gridColumnGap: Tokens["spacing"];
+	rowGap: Tokens["spacing"];
+	columnGap: Tokens["spacing"];
+	padding: Tokens["spacing"];
+	paddingLeft: Tokens["spacing"];
+	paddingRight: Tokens["spacing"];
+	paddingTop: Tokens["spacing"];
+	paddingBottom: Tokens["spacing"];
+	paddingBlock: Tokens["spacing"];
+	paddingBlockEnd: Tokens["spacing"];
+	paddingBlockStart: Tokens["spacing"];
+	paddingInline: Tokens["spacing"];
+	paddingInlineEnd: Tokens["spacing"];
+	paddingInlineStart: Tokens["spacing"];
+	marginLeft: "auto" | Tokens["spacing"];
+	marginRight: "auto" | Tokens["spacing"];
+	marginTop: "auto" | Tokens["spacing"];
+	marginBottom: "auto" | Tokens["spacing"];
+	margin: "auto" | Tokens["spacing"];
+	marginBlock: "auto" | Tokens["spacing"];
+	marginBlockEnd: "auto" | Tokens["spacing"];
+	marginBlockStart: "auto" | Tokens["spacing"];
+	marginInline: "auto" | Tokens["spacing"];
+	marginInlineEnd: "auto" | Tokens["spacing"];
+	marginInlineStart: "auto" | Tokens["spacing"];
+	spaceX: "auto" | Tokens["spacing"] | CssProperties["marginInlineStart"];
+	spaceY: "auto" | Tokens["spacing"] | CssProperties["marginBlockStart"];
+	outlineColor: Tokens["colors"];
+	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";
+	inlineSize: "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";
+	minWidth: "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";
+	minInlineSize: "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";
+	maxWidth: "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";
+	maxInlineSize: "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";
+	height: "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";
+	blockSize: "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";
+	minHeight: "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";
+	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: "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";
+	color: Tokens["colors"];
+	fontSize: Tokens["fontSizes"];
+	fontWeight: Tokens["fontWeights"];
+	fontSmoothing: "antialiased" | "subpixel-antialiased";
+	letterSpacing: Tokens["letterSpacings"];
+	lineHeight: Tokens["lineHeights"];
+	textDecorationColor: Tokens["colors"];
+	textEmphasisColor: Tokens["colors"];
+	textIndent: Tokens["spacing"];
+	textShadow: Tokens["shadows"];
+	textShadowColor: Tokens["colors"];
+	WebkitTextFillColor: Tokens["colors"];
+	textWrap: "wrap" | "balance" | "nowrap";
+	truncate: boolean;
+	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"];
+	gradientVia: Tokens["colors"];
+	borderRadius: Tokens["radii"];
+	borderTopLeftRadius: Tokens["radii"];
+	borderTopRightRadius: Tokens["radii"];
+	borderBottomRightRadius: Tokens["radii"];
+	borderBottomLeftRadius: Tokens["radii"];
+	borderTopRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderRightRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderBottomRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderLeftRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderStartStartRadius: Tokens["radii"];
+	borderStartEndRadius: Tokens["radii"];
+	borderStartRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderEndStartRadius: Tokens["radii"];
+	borderEndEndRadius: Tokens["radii"];
+	borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderColor: Tokens["colors"];
+	borderInlineColor: Tokens["colors"];
+	borderBlockColor: Tokens["colors"];
+	borderLeftColor: Tokens["colors"];
+	borderInlineStartColor: Tokens["colors"];
+	borderRightColor: Tokens["colors"];
+	borderInlineEndColor: Tokens["colors"];
+	borderTopColor: Tokens["colors"];
+	borderBottomColor: Tokens["colors"];
+	borderBlockEndColor: Tokens["colors"];
+	borderBlockStartColor: Tokens["colors"];
+	boxShadow: Tokens["shadows"];
+	boxShadowColor: Tokens["colors"];
+	filter: "auto";
+	backdropFilter: "auto";
+	borderSpacing: Tokens["spacing"] | "auto";
+	borderSpacingX: Tokens["spacing"];
+	borderSpacingY: Tokens["spacing"];
+	transitionProperty: "common" | "colors" | "size" | "position" | "background";
+	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
+	rotate: "auto" | "auto-3d" | CssProperties["rotate"];
+	rotateX: CssProperties["rotate"];
+	rotateY: CssProperties["rotate"];
+	rotateZ: CssProperties["rotate"];
+	scale: "auto" | CssProperties["scale"];
+	translate: "auto" | "auto-3d" | CssProperties["translate"];
+	translateX: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
+	translateY: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
+	translateZ: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
+	accentColor: Tokens["colors"];
+	caretColor: Tokens["colors"];
+	scrollbar: "visible" | "hidden";
+	scrollbarColor: Tokens["colors"];
+	scrollbarWidth: Tokens["sizes"];
+	scrollMargin: Tokens["spacing"];
+	scrollMarginLeft: Tokens["spacing"];
+	scrollMarginRight: Tokens["spacing"];
+	scrollMarginTop: Tokens["spacing"];
+	scrollMarginBottom: Tokens["spacing"];
+	scrollMarginBlock: Tokens["spacing"];
+	scrollMarginBlockEnd: Tokens["spacing"];
+	scrollMarginBlockStart: Tokens["spacing"];
+	scrollMarginInline: Tokens["spacing"];
+	scrollMarginInlineEnd: Tokens["spacing"];
+	scrollMarginInlineStart: Tokens["spacing"];
+	scrollPadding: Tokens["spacing"];
+	scrollPaddingBlock: Tokens["spacing"];
+	scrollPaddingBlockStart: Tokens["spacing"];
+	scrollPaddingBlockEnd: Tokens["spacing"];
+	scrollPaddingInline: Tokens["spacing"];
+	scrollPaddingInlineEnd: Tokens["spacing"];
+	scrollPaddingInlineStart: Tokens["spacing"];
+	scrollPaddingLeft: Tokens["spacing"];
+	scrollPaddingRight: Tokens["spacing"];
+	scrollPaddingTop: Tokens["spacing"];
+	scrollPaddingBottom: Tokens["spacing"];
+	scrollSnapType: "none" | "x" | "y" | "both";
+	scrollSnapStrictness: "mandatory" | "proximity";
+	scrollSnapMargin: Tokens["spacing"];
+	scrollSnapMarginTop: Tokens["spacing"];
+	scrollSnapMarginBottom: Tokens["spacing"];
+	scrollSnapMarginLeft: Tokens["spacing"];
+	scrollSnapMarginRight: Tokens["spacing"];
+	fill: Tokens["colors"];
+	stroke: Tokens["colors"];
+	srOnly: boolean;
+	debug: boolean;
+	containerName: CssProperties["containerName"];
+	colorPalette: "surface" | "foreground" | "muted" | "border" | "success" | "warning" | "danger" | "info" | "content";
+}
+
+
+
+type WithColorOpacityModifier<T> = [T] extends [string] ? `${T}/${string}` & { __colorOpacityModifier?: true } : never
+
+type ImportantMark = "!" | "!important"
+type WhitespaceImportant = ` ${ImportantMark}`
+type Important = ImportantMark | WhitespaceImportant
+type WithImportant<T> = [T] extends [string] ? `${T}${Important}` & { __important?: true } : never
+
+/**
+ * Only relevant when using `strictTokens` or `strictPropertyValues` in your config.
+ * - Allows you to use an escape hatch (e.g. `[123px]`) to use any string as a value.
+ * - Allows you to use a color opacity modifier (e.g. `red/300`) with known color values.
+ * - Allows you to use an important mark (e.g. `!` or `!important`) in the value.
+ *
+ * This is useful when you want to use a value that is not defined in the config or want to opt-out of the defaults.
+ *
+ * @example
+ * css({
+ *   fontSize: '[123px]', // ⚠️ will not throw even if you haven't defined 123px as a token
+ * })
+ *
+ * @see https://panda-css.com/docs/concepts/writing-styles#stricttokens
+ * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
+ */
+export type WithEscapeHatch<T> = T | `[${string}]` | WithColorOpacityModifier<T> | WithImportant<T>
+
+/**
+ * Will restrict the value of properties that have predefined values to those values only.
+ *
+ * @example
+ * css({
+ *   display: 'abc', // ❌ will throw
+ * })
+ *
+ * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
+ */
+export type OnlyKnown<Key, Value> = Value extends boolean
+  ? Value
+  : Value extends `${infer _}` ? Value : never

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

@@ -0,0 +1,181 @@
+/* eslint-disable */
+import type {  RecipeRule  } from './static-css';
+import type {  SystemStyleObject, DistributiveOmit, Pretty  } from './system-types';
+
+type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
+
+export type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>
+
+export type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T
+  ? {}
+  : {
+      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined
+    }
+
+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]>
+}
+
+/* -----------------------------------------------------------------------------
+ * Recipe / Standard
+ * -----------------------------------------------------------------------------*/
+
+export interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {
+  __type: RecipeSelection<T>
+  variantKeys: (keyof T)[]
+  variantMap: RecipeVariantMap<T>
+  raw: (props?: RecipeSelection<T>) => SystemStyleObject
+  config: RecipeConfig<T>
+  splitVariantProps<Props extends RecipeSelection<T>>(
+    props: Props,
+  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]
+  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>
+}
+
+type OneOrMore<T> = T | Array<T>
+
+export type RecipeCompoundSelection<T> = {
+  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined
+}
+
+export type RecipeCompoundVariant<T> = T & {
+  css: SystemStyleObject
+}
+
+export interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {
+  /**
+   * The base styles of the recipe.
+   */
+  base?: SystemStyleObject
+  /**
+   * Whether the recipe is deprecated.
+   */
+  deprecated?: boolean | string
+  /**
+   * The multi-variant styles of the recipe.
+   */
+  variants?: T
+  /**
+   * The default variants of the recipe.
+   */
+  defaultVariants?: RecipeSelection<T>
+  /**
+   * The styles to apply when a combination of variants is selected.
+   */
+  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]
+}
+
+export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
+
+interface RecipeConfigMeta {
+  /**
+   * The class name of the recipe.
+   */
+  className: string
+  /**
+   * The description of the recipe. This will be used in the JSDoc comment.
+   */
+  description?: string
+  /**
+   * The jsx elements to track for this recipe. Can be string or Regexp.
+   *
+   * @default capitalize(recipe.name)
+   * @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>
+  extends RecipeDefinition<T>,
+    RecipeConfigMeta {}
+
+/* -----------------------------------------------------------------------------
+ * Recipe / Slot
+ * -----------------------------------------------------------------------------*/
+
+type SlotRecord<S extends string, T> = Partial<Record<S, T>>
+
+export type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>
+
+export type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (
+  props?: RecipeSelection<T>,
+) => SlotRecord<S, string>
+
+export interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>
+  extends SlotRecipeVariantFn<S, T> {
+  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>
+  variantKeys: (keyof T)[]
+  variantMap: RecipeVariantMap<T>
+  splitVariantProps<Props extends RecipeSelection<T>>(
+    props: Props,
+  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]
+  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>
+}
+
+export type SlotRecipeCompoundVariant<S extends string, T> = T & {
+  css: SlotRecord<S, SystemStyleObject>
+}
+
+export interface SlotRecipeDefinition<
+  S extends string = string,
+  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
+> {
+  /**
+   * An optional class name that can be used to target slots in the DOM.
+   */
+  className?: string
+  /**
+   * Whether the recipe is deprecated.
+   */
+  deprecated?: boolean | string
+  /**
+   * The parts/slots of the recipe.
+   */
+  slots: S[] | Readonly<S[]>
+  /**
+   * The base styles of the recipe.
+   */
+  base?: SlotRecord<S, SystemStyleObject>
+  /**
+   * The multi-variant styles of the recipe.
+   */
+  variants?: T
+  /**
+   * The default variants of the recipe.
+   */
+  defaultVariants?: RecipeSelection<T>
+  /**
+   * The styles to apply when a combination of variants is selected.
+   */
+  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]
+}
+
+export type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(
+  config: SlotRecipeDefinition<S, T>,
+) => SlotRecipeRuntimeFn<S, T>
+
+export type SlotRecipeConfig<
+  S extends string = string,
+  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
+> = SlotRecipeDefinition<S, T> & RecipeConfigMeta

package/dist/styled-system/types/selectors.d.ts

@@ -0,0 +1,59 @@
+/* eslint-disable */
+import type {  Pseudos  } from './csstype';
+
+type AriaAttributes =
+  | '[aria-disabled]'
+  | '[aria-hidden]'
+  | '[aria-invalid]'
+  | '[aria-readonly]'
+  | '[aria-required]'
+  | '[aria-selected]'
+  | '[aria-checked]'
+  | '[aria-expanded]'
+  | '[aria-pressed]'
+  | `[aria-current=${'page' | 'step' | 'location' | 'date' | 'time'}]`
+  | '[aria-invalid]'
+  | `[aria-sort=${'ascending' | 'descending'}]`
+
+type DataAttributes =
+  | '[data-selected]'
+  | '[data-highlighted]'
+  | '[data-hover]'
+  | '[data-active]'
+  | '[data-checked]'
+  | '[data-disabled]'
+  | '[data-readonly]'
+  | '[data-focus]'
+  | '[data-focus-visible]'
+  | '[data-focus-visible-added]'
+  | '[data-invalid]'
+  | '[data-pressed]'
+  | '[data-expanded]'
+  | '[data-grabbed]'
+  | '[data-dragged]'
+  | '[data-orientation=horizontal]'
+  | '[data-orientation=vertical]'
+  | '[data-in-range]'
+  | '[data-out-of-range]'
+  | '[data-placeholder-shown]'
+  | `[data-part=${string}]`
+  | `[data-attr=${string}]`
+  | `[data-placement=${string}]`
+  | `[data-theme=${string}]`
+  | `[data-size=${string}]`
+  | `[data-state=${string}]`
+  | '[data-empty]'
+  | '[data-loading]'
+  | '[data-loaded]'
+  | '[data-enter]'
+  | '[data-entering]'
+  | '[data-exited]'
+  | '[data-exiting]'
+
+type AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`
+type ParentSelector = `${DataAttributes | AriaAttributes} &`
+
+type AtRuleType = 'media' | 'layer' | 'container' | 'supports' | 'page' | 'scope' | 'starting-style'
+
+export type AnySelector = `${string}&` | `&${string}` | `@${AtRuleType}${string}`
+export type Selectors = AttributeSelector | ParentSelector

package/dist/styled-system/types/static-css.d.ts

@@ -0,0 +1,56 @@
+/* eslint-disable */
+interface ConditionOptions {
+  /**
+   * The conditions to generate for the rule.
+   * @example ['hover', 'focus']
+   */
+  conditions?: string[]
+  /**
+   * Whether to generate responsive styles for the rule.
+   */
+  responsive?: boolean
+}
+
+export interface CssRule extends ConditionOptions {
+  /**
+   * The css properties to generate utilities for.
+   * @example ['margin', 'padding']
+   */
+  properties: {
+    [property: string]: Array<string | number>
+  }
+}
+
+interface RecipeRuleVariants {
+  [variant: string]: boolean | string[]
+}
+
+export type RecipeRuleObject = RecipeRuleVariants & ConditionOptions
+export type RecipeRule = '*' | RecipeRuleObject
+
+export type PatternRule = '*' | CssRule
+
+export interface StaticCssOptions {
+  /**
+   * The css utility classes to generate.
+   */
+  css?: CssRule[]
+  /**
+   * The css recipes to generate.
+   */
+  recipes?:
+    | '*'
+    | {
+        [recipe: string]: RecipeRule[]
+      }
+  /**
+   * The css patterns to generate.
+   */
+  patterns?: {
+    [pattern: string]: PatternRule[]
+  }
+  /**
+   * The CSS themes to generate
+   */
+  themes?: string[]
+}