@pyck/styled-system 0.0.1

package/dist/tokens/tokens.d.ts

@@ -0,0 +1,63 @@
+/* eslint-disable */
+export type Token = `aspectRatios.${AspectRatioToken}` | `borders.${BorderToken}` | `radii.${RadiusToken}` | `fontWeights.${FontWeightToken}` | `lineHeights.${LineHeightToken}` | `letterSpacings.${LetterSpacingToken}` | `fontSizes.${FontSizeToken}` | `shadows.${ShadowToken}` | `blurs.${BlurToken}` | `spacing.${SpacingToken}` | `animations.${AnimationToken}` | `colors.${ColorToken}` | `durations.${DurationToken}` | `easings.${EasingToken}` | `zIndex.${ZIndexToken}` | `sizes.${SizeToken}` | `fonts.${FontToken}` | `breakpoints.${BreakpointToken}`
+
+export type ColorPalette = "current" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" | "black" | "white" | "teal.solid.bg" | "teal.solid" | "teal.solid.fg" | "teal.subtle.bg" | "teal.subtle" | "teal.subtle.fg" | "teal.surface.bg" | "teal.surface" | "teal.surface.border" | "teal.surface.fg" | "teal.outline" | "teal.outline.bg" | "teal.outline.border" | "teal.outline.fg" | "teal.plain" | "teal.plain.bg" | "teal.plain.fg" | "gray.solid.bg" | "gray.solid" | "gray.solid.fg" | "gray.subtle.bg" | "gray.subtle" | "gray.subtle.fg" | "gray.surface.bg" | "gray.surface" | "gray.surface.border" | "gray.surface.fg" | "gray.outline" | "gray.outline.bg" | "gray.outline.border" | "gray.outline.fg" | "gray.plain" | "gray.plain.bg" | "gray.plain.fg" | "orange.solid.bg" | "orange.solid" | "orange.solid.fg" | "orange.subtle.bg" | "orange.subtle" | "orange.subtle.fg" | "orange.surface.bg" | "orange.surface" | "orange.surface.border" | "orange.surface.fg" | "orange.outline" | "orange.outline.bg" | "orange.outline.border" | "orange.outline.fg" | "orange.plain" | "orange.plain.bg" | "orange.plain.fg" | "red.solid.bg" | "red.solid" | "red.solid.fg" | "red.subtle.bg" | "red.subtle" | "red.subtle.fg" | "red.surface.bg" | "red.surface" | "red.surface.border" | "red.surface.fg" | "red.outline" | "red.outline.bg" | "red.outline.border" | "red.outline.fg" | "red.plain" | "red.plain.bg" | "red.plain.fg" | "fg" | "canvas" | "border" | "error"
+
+export type AspectRatioToken = "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden"
+
+export type BorderToken = "none"
+
+export type RadiusToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "l1" | "l2" | "l3"
+
+export type FontWeightToken = "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black"
+
+export type LineHeightToken = "none" | "tight" | "snug" | "normal" | "relaxed" | "loose"
+
+export type LetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest"
+
+export type FontSizeToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"
+
+export type ShadowToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inset-2xs" | "inset-xs" | "inset-sm" | "inset"
+
+export type BlurToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+
+export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5"
+
+export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
+
+export type ColorToken = "current" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "black" | "black.a1" | "black.a2" | "black.a3" | "black.a4" | "black.a5" | "black.a6" | "black.a7" | "black.a8" | "black.a9" | "black.a10" | "black.a11" | "black.a12" | "white" | "white.a1" | "white.a2" | "white.a3" | "white.a4" | "white.a5" | "white.a6" | "white.a7" | "white.a8" | "white.a9" | "white.a10" | "white.a11" | "white.a12" | "teal.1" | "teal.2" | "teal.3" | "teal.4" | "teal.5" | "teal.6" | "teal.7" | "teal.8" | "teal.9" | "teal.10" | "teal.11" | "teal.12" | "teal.a1" | "teal.a2" | "teal.a3" | "teal.a4" | "teal.a5" | "teal.a6" | "teal.a7" | "teal.a8" | "teal.a9" | "teal.a10" | "teal.a11" | "teal.a12" | "teal.solid.bg" | "teal.solid.bg.hover" | "teal.solid.fg" | "teal.subtle.bg" | "teal.subtle.bg.hover" | "teal.subtle.bg.active" | "teal.subtle.fg" | "teal.surface.bg" | "teal.surface.bg.active" | "teal.surface.border" | "teal.surface.border.hover" | "teal.surface.fg" | "teal.outline.bg.hover" | "teal.outline.bg.active" | "teal.outline.border" | "teal.outline.fg" | "teal.plain.bg.hover" | "teal.plain.bg.active" | "teal.plain.fg" | "teal.plain.fg.hover" | "gray.1" | "gray.2" | "gray.3" | "gray.4" | "gray.5" | "gray.6" | "gray.7" | "gray.8" | "gray.9" | "gray.10" | "gray.11" | "gray.12" | "gray.a1" | "gray.a2" | "gray.a3" | "gray.a4" | "gray.a5" | "gray.a6" | "gray.a7" | "gray.a8" | "gray.a9" | "gray.a10" | "gray.a11" | "gray.a12" | "gray.solid.bg" | "gray.solid.bg.hover" | "gray.solid.fg" | "gray.subtle.bg" | "gray.subtle.bg.hover" | "gray.subtle.bg.active" | "gray.subtle.fg" | "gray.surface.bg" | "gray.surface.bg.hover" | "gray.surface.bg.active" | "gray.surface.border" | "gray.surface.border.hover" | "gray.surface.fg" | "gray.outline.bg.hover" | "gray.outline.bg.active" | "gray.outline.border" | "gray.outline.fg" | "gray.plain.bg.hover" | "gray.plain.bg.active" | "gray.plain.fg" | "orange.1" | "orange.2" | "orange.3" | "orange.4" | "orange.5" | "orange.6" | "orange.7" | "orange.8" | "orange.9" | "orange.10" | "orange.11" | "orange.12" | "orange.a1" | "orange.a2" | "orange.a3" | "orange.a4" | "orange.a5" | "orange.a6" | "orange.a7" | "orange.a8" | "orange.a9" | "orange.a10" | "orange.a11" | "orange.a12" | "orange.solid.bg" | "orange.solid.bg.hover" | "orange.solid.fg" | "orange.subtle.bg" | "orange.subtle.bg.hover" | "orange.subtle.bg.active" | "orange.subtle.fg" | "orange.surface.bg" | "orange.surface.bg.active" | "orange.surface.border" | "orange.surface.border.hover" | "orange.surface.fg" | "orange.outline.bg.hover" | "orange.outline.bg.active" | "orange.outline.border" | "orange.outline.fg" | "orange.plain.bg.hover" | "orange.plain.bg.active" | "orange.plain.fg" | "red.1" | "red.2" | "red.3" | "red.4" | "red.5" | "red.6" | "red.7" | "red.8" | "red.9" | "red.10" | "red.11" | "red.12" | "red.a1" | "red.a2" | "red.a3" | "red.a4" | "red.a5" | "red.a6" | "red.a7" | "red.a8" | "red.a9" | "red.a10" | "red.a11" | "red.a12" | "red.solid.bg" | "red.solid.bg.hover" | "red.solid.fg" | "red.subtle.bg" | "red.subtle.bg.hover" | "red.subtle.bg.active" | "red.subtle.fg" | "red.surface.bg" | "red.surface.bg.active" | "red.surface.border" | "red.surface.border.hover" | "red.surface.fg" | "red.outline.bg.hover" | "red.outline.bg.active" | "red.outline.border" | "red.outline.fg" | "red.plain.bg.hover" | "red.plain.bg.active" | "red.plain.fg" | "fg.default" | "fg.muted" | "fg.subtle" | "canvas" | "border" | "error" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" | "colorPalette.a1" | "colorPalette.a2" | "colorPalette.a3" | "colorPalette.a4" | "colorPalette.a5" | "colorPalette.a6" | "colorPalette.a7" | "colorPalette.a8" | "colorPalette.a9" | "colorPalette.a10" | "colorPalette.a11" | "colorPalette.a12" | "colorPalette.1" | "colorPalette.2" | "colorPalette.3" | "colorPalette.4" | "colorPalette.5" | "colorPalette.6" | "colorPalette.7" | "colorPalette.8" | "colorPalette.9" | "colorPalette.10" | "colorPalette.11" | "colorPalette.12" | "colorPalette.solid.bg" | "colorPalette.bg" | "colorPalette.solid.bg.hover" | "colorPalette.bg.hover" | "colorPalette.hover" | "colorPalette.solid.fg" | "colorPalette.fg" | "colorPalette.subtle.bg" | "colorPalette.subtle.bg.hover" | "colorPalette.subtle.bg.active" | "colorPalette.bg.active" | "colorPalette.active" | "colorPalette.subtle.fg" | "colorPalette.surface.bg" | "colorPalette.surface.bg.active" | "colorPalette.surface.border" | "colorPalette.border" | "colorPalette.surface.border.hover" | "colorPalette.border.hover" | "colorPalette.surface.fg" | "colorPalette.outline.bg.hover" | "colorPalette.outline.bg.active" | "colorPalette.outline.border" | "colorPalette.outline.fg" | "colorPalette.plain.bg.hover" | "colorPalette.plain.bg.active" | "colorPalette.plain.fg" | "colorPalette.plain.fg.hover" | "colorPalette.fg.hover" | "colorPalette.surface.bg.hover" | "colorPalette.default" | "colorPalette.muted" | "colorPalette.subtle"
+
+export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest"
+
+export type EasingToken = "linear" | "in" | "out" | "in-out" | "pulse" | "default" | "emphasized-in" | "emphasized-out"
+
+export type ZIndexToken = "hide" | "base" | "docked" | "dropdown" | "sticky" | "banner" | "overlay" | "modal" | "popover" | "skipLink" | "toast" | "tooltip"
+
+export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "2xs" | "7xl" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
+
+export type FontToken = "sans" | "serif" | "mono" | "body" | "code"
+
+export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
+
+export type Tokens = {
+		aspectRatios: AspectRatioToken
+		borders: BorderToken
+		radii: RadiusToken
+		fontWeights: FontWeightToken
+		lineHeights: LineHeightToken
+		letterSpacings: LetterSpacingToken
+		fontSizes: FontSizeToken
+		shadows: ShadowToken
+		blurs: BlurToken
+		spacing: SpacingToken
+		animations: AnimationToken
+		colors: ColorToken
+		durations: DurationToken
+		easings: EasingToken
+		zIndex: ZIndexToken
+		sizes: SizeToken
+		fonts: FontToken
+		breakpoints: BreakpointToken
+} & { [token: string]: never }
+
+export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "cursor" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"

package/dist/types/composition.d.ts

@@ -0,0 +1,227 @@
+/* eslint-disable */
+import type {  CompositionStyleObject  } from './system-types';
+
+interface Token<T> {
+  value: T
+  description?: string
+}
+
+interface Recursive<T> {
+  [key: string]: Recursive<T> | T
+}
+
+/* -----------------------------------------------------------------------------
+ * Text styles
+ * -----------------------------------------------------------------------------*/
+
+type TextStyleProperty =
+  | 'color'
+  | 'direction'
+  | 'font'
+  | 'fontFamily'
+  | 'fontFeatureSettings'
+  | 'fontKerning'
+  | 'fontLanguageOverride'
+  | 'fontOpticalSizing'
+  | 'fontPalette'
+  | 'fontSize'
+  | 'fontSizeAdjust'
+  | 'fontStretch'
+  | 'fontStyle'
+  | 'fontSynthesis'
+  | 'fontVariant'
+  | 'fontVariantAlternates'
+  | 'fontVariantCaps'
+  | 'fontVariantLigatures'
+  | 'fontVariantNumeric'
+  | 'fontVariantPosition'
+  | 'fontVariationSettings'
+  | 'fontWeight'
+  | 'hangingPunctuation'
+  | 'hypens'
+  | 'hyphenateCharacter'
+  | 'hyphenateLimitChars'
+  | 'letterSpacing'
+  | 'lineBreak'
+  | 'lineHeight'
+  | 'quotes'
+  | 'overflowWrap'
+  | 'tabSize'
+  | 'textAlign'
+  | 'textAlignLast'
+  | 'textBox'
+  | 'textBoxEdge'
+  | 'textBoxTrim'
+  | 'textCombineUpright'
+  | 'textDecoration'
+  | 'textDecorationColor'
+  | 'textDecorationLine'
+  | 'textDecorationSkip'
+  | 'textDecorationSkipBox'
+  | 'textDecorationSkipInk'
+  | 'textDecorationSkipInset'
+  | 'textDecorationStyle'
+  | 'textDecorationThickness'
+  | 'textEmphasis'
+  | 'textEmphasisColor'
+  | 'textEmphasisPosition'
+  | 'textEmphasisStyle'
+  | 'textIndent'
+  | 'textJustify'
+  | 'textOrientation'
+  | 'textOverflow'
+  | 'textRendering'
+  | 'textShadow'
+  | 'textStroke'
+  | 'textStrokeColor'
+  | 'textStrokeWidth'
+  | 'textTransform'
+  | 'textUnderlineOffset'
+  | 'textUnderlinePosition'
+  | 'textWrap'
+  | 'textWrapMode'
+  | 'textWrapStyle'
+  | 'unicodeBidi'
+  | 'verticalAlign'
+  | 'whiteSpace'
+  | 'wordBreak'
+  | 'wordSpacing'
+  | 'writingMode'
+
+export type TextStyle = CompositionStyleObject<TextStyleProperty>
+
+export type TextStyles = Recursive<Token<TextStyle>>
+
+/* -----------------------------------------------------------------------------
+ * Layer styles
+ * -----------------------------------------------------------------------------*/
+
+type LogicalPlacement = 'Inline' | 'Block' | 'InlineStart' | 'InlineEnd' | 'BlockStart' | 'BlockEnd'
+
+type PhysicalPlacement = 'Top' | 'Right' | 'Bottom' | 'Left'
+
+type Placement = PhysicalPlacement | LogicalPlacement
+
+type Radius =
+  | `Top${'Right' | 'Left'}`
+  | `Bottom${'Right' | 'Left'}`
+  | `Start${'Start' | 'End'}`
+  | `End${'Start' | 'End'}`
+
+type LayerStyleProperty =
+  | 'aspectRatio'
+  | 'background'
+  | 'backgroundColor'
+  | 'backgroundImage'
+  | 'border'
+  | 'borderColor'
+  | 'borderImage'
+  | 'borderImageOutset'
+  | 'borderImageRepeat'
+  | 'borderImageSlice'
+  | 'borderImageSource'
+  | 'borderImageWidth'
+  | 'borderRadius'
+  | 'borderStyle'
+  | 'borderWidth'
+  | `border${Placement}`
+  | `border${Placement}Color`
+  | `border${Placement}Style`
+  | `border${Placement}Width`
+  | 'borderRadius'
+  | `border${Radius}Radius`
+  | 'boxShadow'
+  | 'boxShadowColor'
+  | 'clipPath'
+  | 'color'
+  | 'contain'
+  | 'content'
+  | 'contentVisibility'
+  | 'cursor'
+  | 'display'
+  | 'filter'
+  | 'backdropFilter'
+  | 'height'
+  | 'width'
+  | 'minHeight'
+  | 'minWidth'
+  | 'maxHeight'
+  | 'maxWidth'
+  | `margin${Placement}`
+  | 'inset'
+  | `inset${LogicalPlacement}`
+  | Lowercase<PhysicalPlacement>
+  | 'isolation'
+  | 'mask'
+  | 'maskClip'
+  | 'maskComposite'
+  | 'maskImage'
+  | 'maskMode'
+  | 'maskOrigin'
+  | 'maskPosition'
+  | 'maskRepeat'
+  | 'maskSize'
+  | 'mixBlendMode'
+  | 'objectFit'
+  | 'objectPosition'
+  | 'opacity'
+  | 'outline'
+  | 'outlineColor'
+  | 'outlineOffset'
+  | 'outlineStyle'
+  | 'outlineWidth'
+  | 'overflow'
+  | 'overflowX'
+  | 'overflowY'
+  | 'padding'
+  | `padding${Placement}`
+  | 'pointerEvents'
+  | 'position'
+  | 'resize'
+  | 'transform'
+  | 'transition'
+  | 'visibility'
+  | 'willChange'
+  | 'zIndex'
+  | 'backgroundBlendMode'
+  | 'backgroundAttachment'
+  | 'backgroundClip'
+  | 'backgroundOrigin'
+  | 'backgroundPosition'
+  | 'backgroundRepeat'
+  | 'backgroundSize'
+
+export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
+
+export type LayerStyles = Recursive<Token<LayerStyle>>
+
+/* -----------------------------------------------------------------------------
+ * Motion styles
+ * -----------------------------------------------------------------------------*/
+
+type AnimationStyleProperty =
+  | 'animation'
+  | 'animationComposition'
+  | 'animationDelay'
+  | 'animationDirection'
+  | 'animationDuration'
+  | 'animationFillMode'
+  | 'animationIterationCount'
+  | 'animationName'
+  | 'animationPlayState'
+  | 'animationTimingFunction'
+  | 'animationRange'
+  | 'animationRangeStart'
+  | 'animationRangeEnd'
+  | 'animationTimeline'
+  | 'transformOrigin'
+
+export type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>
+
+export type AnimationStyles = Recursive<Token<AnimationStyle>>
+
+export interface CompositionStyles {
+  textStyles: TextStyles
+  layerStyles: LayerStyles
+  animationStyles: AnimationStyles
+}

package/dist/types/conditions.d.ts

@@ -0,0 +1,314 @@
+/* eslint-disable */
+import type { AnySelector, Selectors } from './selectors';
+
+export interface Conditions {
+	/** `&:not(:is(:disabled, [data-state=on], [data-state=open], [aria-selected=true], [aria-current=page], :active)):hover` */
+	"_hover": string
+	/** `&:is(:focus, [data-focus])` */
+	"_focus": string
+	/** `&:focus-within` */
+	"_focusWithin": string
+	/** `&:is(:focus-visible, [data-focus-visible])` */
+	"_focusVisible": string
+	/** `&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])` */
+	"_disabled": string
+	/** `&:not(:disabled):active` */
+	"_active": string
+	/** `&:visited` */
+	"_visited": string
+	/** `&:target` */
+	"_target": string
+	/** `&:is(:read-only, [data-read-only], [aria-readonly=true])` */
+	"_readOnly": string
+	/** `&:read-write` */
+	"_readWrite": string
+	/** `&:is(:empty, [data-empty])` */
+	"_empty": string
+	/** `&:is([data-state=checked], [data-state=indeterminate])` */
+	"_checked": string
+	/** `&:enabled` */
+	"_enabled": string
+	/** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */
+	"_expanded": string
+	/** `&[data-highlighted]` */
+	"_highlighted": string
+	/** `&[data-complete]` */
+	"_complete": string
+	/** `&[data-incomplete]` */
+	"_incomplete": string
+	/** `&[data-dragging]` */
+	"_dragging": string
+	/** `&::before` */
+	"_before": string
+	/** `&::after` */
+	"_after": string
+	/** `&::first-letter` */
+	"_firstLetter": string
+	/** `&::first-line` */
+	"_firstLine": string
+	/** `&::marker, &::-webkit-details-marker` */
+	"_marker": string
+	/** `&::selection` */
+	"_selection": string
+	/** `&::file-selector-button` */
+	"_file": string
+	/** `&::backdrop` */
+	"_backdrop": string
+	/** `&:first-child` */
+	"_first": string
+	/** `&:last-child` */
+	"_last": string
+	/** `&:only-child` */
+	"_only": string
+	/** `&:nth-child(even)` */
+	"_even": string
+	/** `&:nth-child(odd)` */
+	"_odd": string
+	/** `&:first-of-type` */
+	"_firstOfType": string
+	/** `&:last-of-type` */
+	"_lastOfType": string
+	/** `&:only-of-type` */
+	"_onlyOfType": string
+	/** `.peer:is(:focus, [data-focus]) ~ &` */
+	"_peerFocus": string
+	/** `.peer:is(:hover, [data-hover]) ~ &` */
+	"_peerHover": string
+	/** `.peer:is(:active, [data-active]) ~ &` */
+	"_peerActive": string
+	/** `.peer:focus-within ~ &` */
+	"_peerFocusWithin": string
+	/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */
+	"_peerFocusVisible": string
+	/** `.peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &` */
+	"_peerDisabled": string
+	/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */
+	"_peerChecked": string
+	/** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */
+	"_peerInvalid": string
+	/** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */
+	"_peerExpanded": string
+	/** `.peer:placeholder-shown ~ &` */
+	"_peerPlaceholderShown": string
+	/** `.group:is(:focus, [data-focus]) &` */
+	"_groupFocus": string
+	/** `[role=group]:where(:hover, [data-hover]) &` */
+	"_groupHover": string
+	/** `.group:is(:active, [data-active]) &` */
+	"_groupActive": string
+	/** `.group:focus-within &` */
+	"_groupFocusWithin": string
+	/** `.group:is(:focus-visible, [data-focus-visible]) &` */
+	"_groupFocusVisible": string
+	/** `.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], [aria-invalid=true]) &` */
+	"_groupInvalid": string
+	/** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */
+	"_indeterminate": string
+	/** `&:is(:required, [data-required], [aria-required=true])` */
+	"_required": string
+	/** `&:is(:valid, [data-valid])` */
+	"_valid": string
+	/** `&:is(:user-invalid, [data-invalid], [aria-invalid=true])` */
+	"_invalid": string
+	/** `&:autofill` */
+	"_autofill": string
+	/** `&:is(:in-range, [data-in-range])` */
+	"_inRange": string
+	/** `&:is(:out-of-range, [data-outside-range])` */
+	"_outOfRange": string
+	/** `&::placeholder, &[data-placeholder]` */
+	"_placeholder": string
+	/** `&:is(:placeholder-shown, [data-placeholder-shown])` */
+	"_placeholderShown": string
+	/** `&:is([aria-pressed=true], [data-pressed])` */
+	"_pressed": string
+	/** `&:is([aria-selected=true], [data-selected])` */
+	"_selected": string
+	/** `&:is([aria-grabbed=true], [data-grabbed])` */
+	"_grabbed": string
+	/** `&[data-state=under-value]` */
+	"_underValue": string
+	/** `&[data-state=over-value]` */
+	"_overValue": string
+	/** `&[data-state=at-value]` */
+	"_atValue": string
+	/** `&:default` */
+	"_default": string
+	/** `&:optional` */
+	"_optional": string
+	/** `&:is([open], [data-open], [data-state="open"], :popover-open)` */
+	"_open": string
+	/** `&:is([closed], [data-closed], [data-state="closed"])` */
+	"_closed": string
+	/** `&:is(:fullscreen, [data-fullscreen])` */
+	"_fullscreen": string
+	/** `&:is([data-loading], [aria-busy=true])` */
+	"_loading": string
+	/** `&:is([hidden], [data-hidden])` */
+	"_hidden": string
+	/** `&:is([aria-current=true], [data-current])` */
+	"_current": string
+	/** `&[aria-current=page]` */
+	"_currentPage": string
+	/** `&[aria-current=step]` */
+	"_currentStep": string
+	/** `&:is([data-today])` */
+	"_today": string
+	/** `&[data-unavailable]` */
+	"_unavailable": string
+	/** `&[data-range-start]` */
+	"_rangeStart": string
+	/** `&[data-range-end]` */
+	"_rangeEnd": string
+	/** `&[data-now]` */
+	"_now": string
+	/** `&[data-topmost]` */
+	"_topmost": string
+	/** `@media (prefers-reduced-motion: reduce)` */
+	"_motionReduce": string
+	/** `@media (prefers-reduced-motion: no-preference)` */
+	"_motionSafe": string
+	/** `@media print` */
+	"_print": string
+	/** `@media (orientation: landscape)` */
+	"_landscape": string
+	/** `@media (orientation: portrait)` */
+	"_portrait": string
+	/** `.dark &` */
+	"_dark": string
+	/** `:root &, .light &` */
+	"_light": string
+	/** `@media (prefers-color-scheme: dark)` */
+	"_osDark": string
+	/** `@media (prefers-color-scheme: light)` */
+	"_osLight": string
+	/** `@media (forced-colors: active)` */
+	"_highContrast": string
+	/** `@media (prefers-contrast: less)` */
+	"_lessContrast": string
+	/** `@media (prefers-contrast: more)` */
+	"_moreContrast": string
+	/** `:where([dir=ltr], :dir(ltr)) &` */
+	"_ltr": string
+	/** `:where([dir=rtl], :dir(rtl)) &` */
+	"_rtl": string
+	/** `&::-webkit-scrollbar` */
+	"_scrollbar": string
+	/** `&::-webkit-scrollbar-thumb` */
+	"_scrollbarThumb": string
+	/** `&::-webkit-scrollbar-track` */
+	"_scrollbarTrack": string
+	/** `&[data-orientation=horizontal]` */
+	"_horizontal": string
+	/** `&[data-orientation=vertical]` */
+	"_vertical": string
+	/** `& :where(svg)` */
+	"_icon": string
+	/** `@starting-style` */
+	"_starting": string
+	/** `@media (scripting: none)` */
+	"_noscript": string
+	/** `@media (inverted-colors: inverted)` */
+	"_invertedColors": string
+	/** `&:is([data-pinned])` */
+	"_pinned": string
+	/** `&:is([data-state=on])` */
+	"_on": string
+	/** `@media screen and (min-width: 40rem)` */
+	"sm": string
+	/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
+	"smOnly": string
+	/** `@media screen and (max-width: 39.9975rem)` */
+	"smDown": string
+	/** `@media screen and (min-width: 48rem)` */
+	"md": string
+	/** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */
+	"mdOnly": string
+	/** `@media screen and (max-width: 47.9975rem)` */
+	"mdDown": string
+	/** `@media screen and (min-width: 64rem)` */
+	"lg": string
+	/** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
+	"lgOnly": string
+	/** `@media screen and (max-width: 63.9975rem)` */
+	"lgDown": string
+	/** `@media screen and (min-width: 80rem)` */
+	"xl": string
+	/** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */
+	"xlOnly": string
+	/** `@media screen and (max-width: 79.9975rem)` */
+	"xlDown": string
+	/** `@media screen and (min-width: 96rem)` */
+	"2xl": string
+	/** `@media screen and (min-width: 96rem)` */
+	"2xlOnly": string
+	/** `@media screen and (max-width: 95.9975rem)` */
+	"2xlDown": string
+	/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
+	"smToMd": string
+	/** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */
+	"smToLg": string
+	/** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */
+	"smToXl": string
+	/** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */
+	"smTo2xl": string
+	/** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */
+	"mdToLg": string
+	/** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */
+	"mdToXl": string
+	/** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */
+	"mdTo2xl": string
+	/** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
+	"lgToXl": string
+	/** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */
+	"lgTo2xl": string
+	/** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */
+	"xlTo2xl": string
+	/** `@container  (min-width: 20rem)` */
+	"@/xs": string
+	/** `@container  (min-width: 24rem)` */
+	"@/sm": string
+	/** `@container  (min-width: 28rem)` */
+	"@/md": string
+	/** `@container  (min-width: 32rem)` */
+	"@/lg": string
+	/** `@container  (min-width: 36rem)` */
+	"@/xl": string
+	/** `@container  (min-width: 42rem)` */
+	"@/2xl": string
+	/** `@container  (min-width: 48rem)` */
+	"@/3xl": string
+	/** `@container  (min-width: 56rem)` */
+	"@/4xl": string
+	/** `@container  (min-width: 64rem)` */
+	"@/5xl": string
+	/** `@container  (min-width: 72rem)` */
+	"@/6xl": string
+	/** `@container  (min-width: 80rem)` */
+	"@/7xl": string
+	/** `@container  (min-width: 90rem)` */
+	"@/8xl": string
+	/** The base (=no conditions) styles to apply  */
+	"base": string
+}
+
+export type ConditionalValue<V> =
+  | V
+  | Array<V | null>
+  | {
+      [K in keyof Conditions]?: ConditionalValue<V>
+    }
+
+export type Nested<P> = P & {
+  [K in Selectors]?: Nested<P>
+} & {
+  [K in AnySelector]?: Nested<P>
+} & {
+  [K in keyof Conditions]?: Nested<P>
+}