@mochi-css/vanilla 0.1.0 → 1.1.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { DataType, Globals, ObsoleteProperties, Properties } from "csstype";
+import { ObsoleteProperties, Properties } from "csstype";
 import { ComponentProps, ComponentType, FC, HTMLElementType } from "react";
 
-//#region src/values/shared.d.ts
+//#region src/values/index.d.ts
 type CssVar = `--${string}`;
 type CssVarVal = `var(${CssVar})`;
 type CssLikeObject<T> = {
@@ -9,38 +9,6 @@ type CssLikeObject<T> = {
 };
 type CssLike<T> = T | CssLikeObject<T>;
 //#endregion
-//#region src/values/length.d.ts
-declare class PixelValue extends NumericValue<"px"> {
-  constructor(value: number);
-}
-declare class PercentValue extends NumericValue<"%"> {
-  constructor(value: number);
-}
-type LengthUnit = "%" | "px" | "vw" | "vh" | "rem";
-type CssLengthString = `${number}${LengthUnit}` | CssVarVal | Globals | "auto";
-type CssLength = number | CssLengthString | CssVarVal;
-type CssLengthLike = CssLike<CssLength>;
-declare function asLength(value: CssLengthLike): CssLengthString;
-//#endregion
-//#region src/values/number.d.ts
-type Unit = "%" | "px" | "deg" | "rad" | "grad" | "rem" | "vw" | "vh";
-declare class NumericValue<T extends LengthUnit = LengthUnit> {
-  private readonly value;
-  private readonly suffix;
-  constructor(value: number, suffix: T);
-  toString(): `${number}${T}`;
-}
-//#endregion
-//#region src/values/color.d.ts
-type RGBColorString = `rgb(${number},${number},${number})`;
-type RGBAColorString = `rgba(${number},${number},${number},${number})`;
-type HSLColorString = `hsl(${number},${number},${number})`;
-type HSLAColorString = `hsla(${number},${number},${number},${number})`;
-type ColorString = RGBColorString | RGBAColorString | HSLColorString | HSLAColorString;
-type CssColor = DataType.NamedColor | "transparent" | "currentColor" | "auto" | ColorString | CssVarVal;
-type CssColorLike = CssLike<CssColor>;
-declare function asColor(value: CssColorLike): CssColor;
-//#endregion
 //#region src/token.d.ts
 /**
  * Represents a CSS custom property (design token) with type information.
@@ -51,7 +19,7 @@ declare function asColor(value: CssColorLike): CssColor;
  * primaryColor.variable // '--primary-color'
  * primaryColor.value    // 'var(--primary-color)'
  */
-declare class Token<T> {
+declare class Token {
   readonly name: string;
   /**
    * Creates a new CSS token.
@@ -82,7 +50,7 @@ declare class Token<T> {
  * const spacing = createToken<number>('spacing-md')
  * // Use in styles: { gap: spacing.value }
  */
-declare function createToken<T>(name: string): Token<T>;
+declare function createToken(name: string): Token;
 //#endregion
 //#region src/selector.d.ts
 /**
@@ -151,53 +119,342 @@ declare class MochiSelector {
   private static split;
 }
 //#endregion
+//#region src/propertyUnits.generated.d.ts
+declare const propertyUnits: {
+  readonly animation: "ms";
+  readonly animationDelay: "ms";
+  readonly animationDuration: "ms";
+  readonly animationRange: "px";
+  readonly animationRangeCenter: "px";
+  readonly animationRangeEnd: "px";
+  readonly animationRangeStart: "px";
+  readonly background: "px";
+  readonly backgroundPosition: "px";
+  readonly backgroundPositionBlock: "px";
+  readonly backgroundPositionInline: "px";
+  readonly backgroundPositionX: "px";
+  readonly backgroundPositionY: "px";
+  readonly backgroundSize: "px";
+  readonly backgroundTbd: "px";
+  readonly baselineShift: "px";
+  readonly blockSize: "px";
+  readonly blockStep: "px";
+  readonly blockStepSize: "px";
+  readonly border: "px";
+  readonly borderBlock: "px";
+  readonly borderBlockClip: "px";
+  readonly borderBlockEnd: "px";
+  readonly borderBlockEndClip: "px";
+  readonly borderBlockEndRadius: "px";
+  readonly borderBlockEndWidth: "px";
+  readonly borderBlockStart: "px";
+  readonly borderBlockStartClip: "px";
+  readonly borderBlockStartRadius: "px";
+  readonly borderBlockStartWidth: "px";
+  readonly borderBlockWidth: "px";
+  readonly borderBottom: "px";
+  readonly borderBottomClip: "px";
+  readonly borderBottomLeftRadius: "px";
+  readonly borderBottomRadius: "px";
+  readonly borderBottomRightRadius: "px";
+  readonly borderBottomWidth: "px";
+  readonly borderClip: "px";
+  readonly borderEndEndRadius: "px";
+  readonly borderEndStartRadius: "px";
+  readonly borderImage: "%";
+  readonly borderImageOutset: "px";
+  readonly borderImageSlice: "%";
+  readonly borderImageWidth: "px";
+  readonly borderInline: "px";
+  readonly borderInlineClip: "px";
+  readonly borderInlineEnd: "px";
+  readonly borderInlineEndClip: "px";
+  readonly borderInlineEndRadius: "px";
+  readonly borderInlineEndWidth: "px";
+  readonly borderInlineStart: "px";
+  readonly borderInlineStartClip: "px";
+  readonly borderInlineStartRadius: "px";
+  readonly borderInlineStartWidth: "px";
+  readonly borderInlineWidth: "px";
+  readonly borderLeft: "px";
+  readonly borderLeftClip: "px";
+  readonly borderLeftRadius: "px";
+  readonly borderLeftWidth: "px";
+  readonly borderLimit: "px";
+  readonly borderRadius: "px";
+  readonly borderRight: "px";
+  readonly borderRightClip: "px";
+  readonly borderRightRadius: "px";
+  readonly borderRightWidth: "px";
+  readonly borderSpacing: "px";
+  readonly borderStartEndRadius: "px";
+  readonly borderStartStartRadius: "px";
+  readonly borderTop: "px";
+  readonly borderTopClip: "px";
+  readonly borderTopLeftRadius: "px";
+  readonly borderTopRadius: "px";
+  readonly borderTopRightRadius: "px";
+  readonly borderTopWidth: "px";
+  readonly borderWidth: "px";
+  readonly bottom: "px";
+  readonly boxShadow: "px";
+  readonly boxShadowBlur: "px";
+  readonly boxShadowOffset: "px";
+  readonly boxShadowSpread: "px";
+  readonly columnGap: "px";
+  readonly columnHeight: "px";
+  readonly columnRule: "px";
+  readonly columnRuleEdgeInset: "px";
+  readonly columnRuleEdgeInsetEnd: "px";
+  readonly columnRuleEdgeInsetStart: "px";
+  readonly columnRuleInset: "px";
+  readonly columnRuleInsetEnd: "px";
+  readonly columnRuleInsetStart: "px";
+  readonly columnRuleInteriorInset: "px";
+  readonly columnRuleInteriorInsetEnd: "px";
+  readonly columnRuleInteriorInsetStart: "px";
+  readonly columnRuleWidth: "px";
+  readonly columns: "px";
+  readonly columnWidth: "px";
+  readonly containIntrinsicBlockSize: "px";
+  readonly containIntrinsicHeight: "px";
+  readonly containIntrinsicInlineSize: "px";
+  readonly containIntrinsicSize: "px";
+  readonly containIntrinsicWidth: "px";
+  readonly corner: "px";
+  readonly cornerBlockEnd: "px";
+  readonly cornerBlockStart: "px";
+  readonly cornerBottom: "px";
+  readonly cornerBottomLeft: "px";
+  readonly cornerBottomRight: "px";
+  readonly cornerEndEnd: "px";
+  readonly cornerEndStart: "px";
+  readonly cornerInlineEnd: "px";
+  readonly cornerInlineStart: "px";
+  readonly cornerLeft: "px";
+  readonly cornerRight: "px";
+  readonly cornerStartEnd: "px";
+  readonly cornerStartStart: "px";
+  readonly cornerTop: "px";
+  readonly cornerTopLeft: "px";
+  readonly cornerTopRight: "px";
+  readonly cx: "px";
+  readonly cy: "px";
+  readonly fillOpacity: "%";
+  readonly fillPosition: "px";
+  readonly fillSize: "px";
+  readonly flex: "px";
+  readonly flexBasis: "px";
+  readonly floatOffset: "px";
+  readonly floodOpacity: "%";
+  readonly flowTolerance: "px";
+  readonly font: "deg";
+  readonly fontSize: "px";
+  readonly fontStretch: "%";
+  readonly fontStyle: "deg";
+  readonly fontWidth: "%";
+  readonly gap: "px";
+  readonly grid: "px";
+  readonly gridAutoColumns: "px";
+  readonly gridAutoRows: "px";
+  readonly gridColumnGap: "px";
+  readonly gridGap: "px";
+  readonly gridRowGap: "px";
+  readonly gridTemplate: "px";
+  readonly gridTemplateColumns: "px";
+  readonly gridTemplateRows: "px";
+  readonly height: "px";
+  readonly hyphenateLimitZone: "px";
+  readonly imageOrientation: "deg";
+  readonly imageResolution: "dppx";
+  readonly initialLetterWrap: "px";
+  readonly inlineSize: "px";
+  readonly inset: "px";
+  readonly insetBlock: "px";
+  readonly insetBlockEnd: "px";
+  readonly insetBlockStart: "px";
+  readonly insetInline: "px";
+  readonly insetInlineEnd: "px";
+  readonly insetInlineStart: "px";
+  readonly interestDelay: "ms";
+  readonly interestDelayEnd: "ms";
+  readonly interestDelayStart: "ms";
+  readonly itemFlow: "px";
+  readonly left: "px";
+  readonly letterSpacing: "px";
+  readonly lineHeight: "px";
+  readonly lineHeightStep: "px";
+  readonly linePadding: "px";
+  readonly margin: "px";
+  readonly marginBlock: "px";
+  readonly marginBlockEnd: "px";
+  readonly marginBlockStart: "px";
+  readonly marginBottom: "px";
+  readonly marginInline: "px";
+  readonly marginInlineEnd: "px";
+  readonly marginInlineStart: "px";
+  readonly marginLeft: "px";
+  readonly marginRight: "px";
+  readonly marginTop: "px";
+  readonly mask: "px";
+  readonly maskBorder: "%";
+  readonly maskBorderOutset: "px";
+  readonly maskBorderSlice: "%";
+  readonly maskBorderWidth: "px";
+  readonly maskPosition: "px";
+  readonly maskSize: "px";
+  readonly maxBlockSize: "px";
+  readonly maxHeight: "px";
+  readonly maxInlineSize: "px";
+  readonly maxWidth: "px";
+  readonly minBlockSize: "px";
+  readonly minHeight: "px";
+  readonly minInlineSize: "px";
+  readonly minWidth: "px";
+  readonly objectPosition: "px";
+  readonly offset: "px";
+  readonly offsetAnchor: "px";
+  readonly offsetDistance: "px";
+  readonly offsetPosition: "px";
+  readonly offsetRotate: "deg";
+  readonly opacity: "%";
+  readonly outline: "px";
+  readonly outlineOffset: "px";
+  readonly outlineWidth: "px";
+  readonly overflowClipMargin: "px";
+  readonly overflowClipMarginBlock: "px";
+  readonly overflowClipMarginBlockEnd: "px";
+  readonly overflowClipMarginBlockStart: "px";
+  readonly overflowClipMarginBottom: "px";
+  readonly overflowClipMarginInline: "px";
+  readonly overflowClipMarginInlineEnd: "px";
+  readonly overflowClipMarginInlineStart: "px";
+  readonly overflowClipMarginLeft: "px";
+  readonly overflowClipMarginRight: "px";
+  readonly overflowClipMarginTop: "px";
+  readonly padding: "px";
+  readonly paddingBlock: "px";
+  readonly paddingBlockEnd: "px";
+  readonly paddingBlockStart: "px";
+  readonly paddingBottom: "px";
+  readonly paddingInline: "px";
+  readonly paddingInlineEnd: "px";
+  readonly paddingInlineStart: "px";
+  readonly paddingLeft: "px";
+  readonly paddingRight: "px";
+  readonly paddingTop: "px";
+  readonly pause: "ms";
+  readonly pauseAfter: "ms";
+  readonly pauseBefore: "ms";
+  readonly perspective: "px";
+  readonly perspectiveOrigin: "px";
+  readonly r: "px";
+  readonly rest: "ms";
+  readonly restAfter: "ms";
+  readonly restBefore: "ms";
+  readonly right: "px";
+  readonly rotate: "deg";
+  readonly rowGap: "px";
+  readonly rowRule: "px";
+  readonly rowRuleEdgeInset: "px";
+  readonly rowRuleEdgeInsetEnd: "px";
+  readonly rowRuleEdgeInsetStart: "px";
+  readonly rowRuleInset: "px";
+  readonly rowRuleInsetEnd: "px";
+  readonly rowRuleInsetStart: "px";
+  readonly rowRuleInteriorInset: "px";
+  readonly rowRuleInteriorInsetEnd: "px";
+  readonly rowRuleInteriorInsetStart: "px";
+  readonly rowRuleWidth: "px";
+  readonly rule: "px";
+  readonly ruleEdgeInset: "px";
+  readonly ruleInset: "px";
+  readonly ruleInsetEnd: "px";
+  readonly ruleInsetStart: "px";
+  readonly ruleInteriorInset: "px";
+  readonly ruleWidth: "px";
+  readonly rx: "px";
+  readonly ry: "px";
+  readonly scale: "%";
+  readonly scrollMargin: "px";
+  readonly scrollMarginBlock: "px";
+  readonly scrollMarginBlockEnd: "px";
+  readonly scrollMarginBlockStart: "px";
+  readonly scrollMarginBottom: "px";
+  readonly scrollMarginInline: "px";
+  readonly scrollMarginInlineEnd: "px";
+  readonly scrollMarginInlineStart: "px";
+  readonly scrollMarginLeft: "px";
+  readonly scrollMarginRight: "px";
+  readonly scrollMarginTop: "px";
+  readonly scrollPadding: "px";
+  readonly scrollPaddingBlock: "px";
+  readonly scrollPaddingBlockEnd: "px";
+  readonly scrollPaddingBlockStart: "px";
+  readonly scrollPaddingBottom: "px";
+  readonly scrollPaddingInline: "px";
+  readonly scrollPaddingInlineEnd: "px";
+  readonly scrollPaddingInlineStart: "px";
+  readonly scrollPaddingLeft: "px";
+  readonly scrollPaddingRight: "px";
+  readonly scrollPaddingTop: "px";
+  readonly shapeImageThreshold: "%";
+  readonly shapeMargin: "px";
+  readonly shapePadding: "px";
+  readonly stopOpacity: "%";
+  readonly strokeDasharray: "px";
+  readonly strokeDashcorner: "px";
+  readonly strokeDashCorner: "px";
+  readonly strokeDashoffset: "px";
+  readonly strokeOpacity: "%";
+  readonly strokePosition: "px";
+  readonly strokeSize: "px";
+  readonly strokeWidth: "px";
+  readonly tabSize: "px";
+  readonly textDecoration: "px";
+  readonly textDecorationInset: "px";
+  readonly textDecorationThickness: "px";
+  readonly textIndent: "px";
+  readonly textShadow: "px";
+  readonly textSizeAdjust: "%";
+  readonly textUnderlineOffset: "px";
+  readonly timelineTrigger: "px";
+  readonly timelineTriggerExitRange: "px";
+  readonly timelineTriggerExitRangeEnd: "px";
+  readonly timelineTriggerExitRangeStart: "px";
+  readonly timelineTriggerRange: "px";
+  readonly timelineTriggerRangeEnd: "px";
+  readonly timelineTriggerRangeStart: "px";
+  readonly top: "px";
+  readonly transformOrigin: "px";
+  readonly transition: "ms";
+  readonly transitionDelay: "ms";
+  readonly transitionDuration: "ms";
+  readonly translate: "px";
+  readonly verticalAlign: "px";
+  readonly viewTimeline: "px";
+  readonly viewTimelineInset: "px";
+  readonly voiceDuration: "ms";
+  readonly voicePitch: "Hz";
+  readonly voiceRange: "Hz";
+  readonly voiceRate: "%";
+  readonly width: "px";
+  readonly wordSpacing: "px";
+  readonly x: "px";
+  readonly y: "px";
+  readonly zoom: "%";
+};
+type PropertyWithUnit = keyof typeof propertyUnits;
+//#endregion
 //#region src/props.d.ts
 /** All non-obsolete CSS properties from csstype */
 type Props = Required<Omit<Properties, keyof ObsoleteProperties>>;
-declare const styles: {
-  borderBlockEndWidth: typeof asLength;
-  borderBlockStartWidth: typeof asLength;
-  borderBottomColor: typeof asColor;
-  borderBottomLeftRadius: typeof asLength;
-  borderBottomRightRadius: typeof asLength;
-  borderBottomWidth: typeof asLength;
-  borderEndEndRadius: typeof asLength;
-  borderEndStartRadius: typeof asLength;
-  borderInlineEndWidth: typeof asLength;
-  borderInlineStartWidth: typeof asLength;
-  borderLeftWidth: typeof asLength;
-  borderRightWidth: typeof asLength;
-  borderStartEndRadius: typeof asLength;
-  borderStartStartRadius: typeof asLength;
-  borderTopLeftRadius: typeof asLength;
-  borderTopRightRadius: typeof asLength;
-  borderTopWidth: typeof asLength;
-  borderBlockWidth: typeof asLength;
-  borderInlineWidth: typeof asLength;
-  borderWidth: typeof asLength;
-  gap: typeof asLength;
-  height: typeof asLength;
-  lineHeight: typeof asLength;
-  marginBottom: typeof asLength;
-  marginLeft: typeof asLength;
-  marginRight: typeof asLength;
-  marginTop: typeof asLength;
-  paddingBottom: typeof asLength;
-  paddingLeft: typeof asLength;
-  paddingRight: typeof asLength;
-  paddingTop: typeof asLength;
-  width: typeof asLength;
-};
+/** Properties that have default units and are valid CSS properties */
+type PropsWithUnit = PropertyWithUnit & keyof Props;
 /**
- * Checks if a property name is a CSS custom property (variable).
+ * Converts a kebab-case string to camelCase.
  */
 
-/**
- * Converts a CSS-like value to a string for use as a CSS variable value.
- * @param value - The value to convert (string, number, or wrapped value)
- * @returns The string representation
- */
-declare function asVar(value: CssLike<string | number>): string;
 /** A nested CSS selector pattern containing the parent reference `&` */
 type NestedCssSelector = `${string}&${string}`;
 /** A CSS media query starting with `@` */
@@ -207,8 +464,11 @@ type NestedStyleKeys = MediaSelector | NestedCssSelector;
  * Style properties without nesting support.
  * Includes all standard CSS properties with type-safe value converters,
  * plus CSS custom properties (variables).
+ *
+ * Properties with known units (e.g., width, height, padding) accept numbers
+ * that are automatically converted with their default unit (e.g., px, ms).
  */
-type SimpleStyleProps = { [K in keyof typeof styles]?: Parameters<(typeof styles)[K]>[0] } & { [K in Exclude<keyof Props, keyof typeof styles>]?: CssLike<Props[K]> } & { [K in CssVar]?: Parameters<(typeof asVar)>[0] };
+type SimpleStyleProps = { [K in PropsWithUnit]?: CssLike<number | Props[K]> } & { [K in Exclude<keyof Props, PropsWithUnit>]?: CssLike<Props[K]> } & Partial<Record<CssVar, CssLike<string | number>>>;
 /**
  * Full style properties type with support for nested selectors and media queries.
  * Extends SimpleStyleProps to allow recursive style definitions.
@@ -296,8 +556,21 @@ declare class CssObjectBlock {
    */
   asCssString(root: string): string;
 }
-/** Default type for variant definitions: maps variant names to option names to styles */
-type DefaultVariants = Record<string, Record<string, StyleProps>>;
+type AllVariants = Record<string, Record<string, StyleProps>>;
+type DefaultVariants = Record<never, Record<string, StyleProps>>;
+/**
+ * A compound variant entry that applies styles when multiple variant conditions match.
+ * Each entry specifies a set of variant conditions and a `css` property with styles
+ * that apply only when all conditions are satisfied simultaneously.
+ *
+ * @template V - The variant definitions type
+ *
+ * @example
+ * { color: 'red', size: 'large', css: { fontWeight: 'bold' } }
+ */
+type CompoundVariant<V extends AllVariants> = { [K in keyof V]?: keyof V[K] } & {
+  css: StyleProps;
+};
 /**
  * Refines string literal types to their proper runtime types.
  * Converts "true"/"false" strings to boolean literals.
@@ -307,22 +580,24 @@ type RefineVariantType<T extends string> = T extends "true" ? true : T extends "
  * Props for defining variants in a style object.
  * @template V - The variant definitions type
  */
-type VariantProps<V extends DefaultVariants> = {
+type VariantProps<V extends AllVariants> = {
   /** Variant definitions mapping names to options to styles */
   variants?: V;
   /** Default variant selections for when not explicitly provided */
-  defaultVariants?: { [K in keyof V]: (keyof V[K]) extends any ? RefineVariantType<keyof V[K] & string> : never };
+  defaultVariants?: { [K in keyof V]?: keyof V[K] extends string ? RefineVariantType<keyof V[K] & string> : never };
+  /** Compound variant definitions that apply when multiple variant conditions match */
+  compoundVariants?: CompoundVariant<V>[];
 };
 /** Combined type for style props with optional variants */
-type MochiCSSProps<V extends DefaultVariants> = StyleProps & VariantProps<V>;
+type MochiCSSProps<V extends AllVariants> = StyleProps & VariantProps<V>;
 /** Utility type to override properties of A with properties of B */
 type Override<A extends object, B extends object> = B & Omit<A, keyof B>;
 /** Recursively merges variant types from a tuple, with later types overriding earlier */
-type MergeCSSVariants<V extends DefaultVariants[]> = V extends [infer V1 extends DefaultVariants, ...infer VRest extends DefaultVariants[]] ? Override<V1, MergeCSSVariants<VRest>> : {};
+type MergeCSSVariants<V extends AllVariants[]> = V extends [infer V1 extends AllVariants, ...infer VRest extends AllVariants[]] ? Override<V1, MergeCSSVariants<VRest>> : DefaultVariants;
 /** Refines all values in a string record to their proper variant types */
 type RefineVariantTypes<V extends Record<string, string>> = { [K in keyof V]: RefineVariantType<V[K]> };
 /** Extracts and refines variant option types from a DefaultVariants definition */
-type RefineVariants<T extends DefaultVariants> = RefineVariantTypes<{ [K in keyof T]: keyof T[K] & string }>;
+type RefineVariants<T extends AllVariants> = RefineVariantTypes<{ [K in keyof T]: keyof T[K] & string }>;
 /**
  * Complete CSS object representation with main and variant styles.
  *
@@ -341,21 +616,26 @@ type RefineVariants<T extends DefaultVariants> = RefineVariantTypes<{ [K in keyo
  * })
  * obj.asCssString() // Returns complete CSS with all variants
  */
-declare class CSSObject<V extends Record<string, Record<string, StyleProps>> = {}> {
+declare class CSSObject<V extends AllVariants = DefaultVariants> {
   /** The main style block (non-variant styles) */
   readonly mainBlock: CssObjectBlock;
   /** Compiled blocks for each variant option */
-  readonly variantBlocks: { [K in keyof V & string]: { [I in keyof V[K] & string]: CssObjectBlock } };
+  readonly variantBlocks: { [K in keyof V & string]: Record<keyof V[K] & string, CssObjectBlock> };
   /** Default variant selections */
   readonly variantDefaults: Partial<RefineVariants<V>>;
+  /** Compound variant conditions and their parsed sub-blocks */
+  readonly compoundVariants: {
+    conditions: Record<string, string>;
+    subBlocks: CssObjectSubBlock[];
+  }[];
   /**
    * Creates a new CSSObject from style props.
    * Compiles main styles and all variant options into CSS blocks.
-   * @param props - Style properties with optional variants and defaults
    */
   constructor({
     variants,
     defaultVariants,
+    compoundVariants,
     ...props
   }: MochiCSSProps<V>);
   /**
@@ -381,7 +661,7 @@ declare class CSSObject<V extends Record<string, Record<string, StyleProps>> = {
  * }))
  * styles.variant({ size: 'large' }) // Returns combined class names
  */
-declare class MochiCSS<V extends Record<string, Record<string, StyleProps>> = {}> {
+declare class MochiCSS<V extends AllVariants = DefaultVariants> {
   readonly classNames: string[];
   readonly variantClassNames: { [K in keyof V]: { [P in keyof V[K]]: string } };
   readonly defaultVariants: Partial<RefineVariants<V>>;
@@ -394,6 +674,8 @@ declare class MochiCSS<V extends Record<string, Record<string, StyleProps>> = {}
   constructor(classNames: string[], variantClassNames: { [K in keyof V]: { [P in keyof V[K]]: string } }, defaultVariants: Partial<RefineVariants<V>>);
   /**
    * Computes the final className string based on variant selections.
+   * Compound variants are handled purely via CSS combined selectors,
+   * so no runtime matching is needed here.
    * @param props - Variant selections
    * @returns Combined className string for use in components
    */
@@ -405,43 +687,20 @@ declare class MochiCSS<V extends Record<string, Record<string, StyleProps>> = {}
    * @param object - The compiled CSSObject to extract from
    * @returns A new MochiCSS instance with the extracted class names
    */
-  static from<V extends Record<string, Record<string, StyleProps>> = {}>(object: CSSObject<V>): MochiCSS<V>;
+  static from<V extends AllVariants = DefaultVariants>(object: CSSObject<V>): MochiCSS<V>;
 }
 /**
- * Creates a CSS style definition.
- * The primary API for defining styles in Mochi-CSS.
- *
- * @template V - Tuple of variant definition types
- * @param props - One or more style objects or existing MochiCSS instances to merge
- * @returns A MochiCSS instance with all styles and variants combined
- *
- * @example
- * // Simple usage
- * const button = css({ padding: 8, borderRadius: 4 })
- *
- * @example
- * // With variants
- * const button = css({
- *   padding: 8,
- *   variants: {
- *     size: {
- *       small: { padding: 4 },
- *       large: { padding: 16 }
- *     }
- *   },
- *   defaultVariants: { size: 'small' }
- * })
- * button.variant({ size: 'large' }) // Get class names for large size
- *
- * @example
- * // Merging multiple styles
- * const combined = css(baseStyles, additionalStyles)
+ * Merges multiple MochiCSS instances into a single one, combining their
+ * class names, variant class names, and default variants.
+ * @param instances - The MochiCSS instances to merge
+ * @returns A new MochiCSS instance with all styles combined
  */
-declare function css<V extends DefaultVariants[]>(...props: { [K in keyof V]: MochiCSSProps<V[K]> | MochiCSS }): MochiCSS<MergeCSSVariants<V>>;
+declare function mergeMochiCss<V extends AllVariants[]>(instances: MochiCSS<AllVariants>[]): MochiCSS<MergeCSSVariants<V>>;
+declare function css<V extends AllVariants[]>(...props: { [K in keyof V]: MochiCSSProps<V[K]> | MochiCSS }): MochiCSS<MergeCSSVariants<V>>;
 //#endregion
 //#region src/styled.d.ts
 /** Props added by MochiCSS to styled components */
-type MochiProps<V extends DefaultVariants[]> = {
+type MochiProps<V extends AllVariants[]> = {
   className?: string;
 } & Partial<RefineVariants<MergeCSSVariants<V>>>;
 /** Minimal interface for components that accept className */
@@ -476,7 +735,62 @@ type Cls = {
  *
  * // Usage: <Button size="large" variant="primary">Click me</Button>
  */
-declare function styled<T extends HTMLElementType | ComponentType<Cls>, V extends DefaultVariants[]>(target: T, ...props: { [K in keyof V]: MochiCSSProps<V[K]> }): FC<Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>>;
+declare function styled<T extends HTMLElementType | ComponentType<Cls>, V extends AllVariants[]>(target: T, ...props: { [K in keyof V]: MochiCSSProps<V[K]> }): FC<Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>>;
+//#endregion
+//#region src/keyframesObject.d.ts
+type KeyframeStops = Record<string, SimpleStyleProps>;
+declare class KeyframesObject {
+  readonly name: string;
+  private readonly body;
+  constructor(stops: KeyframeStops);
+  asCssString(): string;
+  private static generateBody;
+}
+//#endregion
+//#region src/keyframes.d.ts
+declare class MochiKeyframes {
+  readonly name: string;
+  constructor(name: string);
+  toString(): string;
+  get value(): string;
+  static from(object: KeyframesObject): MochiKeyframes;
+}
+declare function keyframes(stops: KeyframeStops): MochiKeyframes;
+//#endregion
+//#region src/globalCssObject.d.ts
+type GlobalCssStyles = Record<string, StyleProps>;
+/**
+ * CSS object model for global (non-scoped) styles.
+ * Accepts a map of CSS selectors to style objects and serializes them
+ * as plain CSS rules without class name scoping.
+ *
+ * @example
+ * const obj = new GlobalCssObject({
+ *   body: { margin: 0 },
+ *   'h1': { fontSize: 32 },
+ * })
+ * obj.asCssString() // "body {\n    margin: 0;\n}\n\nh1 {\n    font-size: 32px;\n}"
+ */
+declare class GlobalCssObject {
+  private readonly rules;
+  constructor(styles: GlobalCssStyles);
+  asCssString(): string;
+}
+//#endregion
+//#region src/globalCss.d.ts
+/**
+ * Creates a global CSS definition.
+ * Styles are not scoped to any class — they apply to all matching elements.
+ *
+ * @param styles - Map of CSS selectors to style objects
+ *
+ * @example
+ * globalCss({
+ *   'body': { margin: 0, padding: 0 },
+ *   '*, *::before, *::after': { boxSizing: 'border-box' },
+ * })
+ */
+declare function globalCss(styles: GlobalCssStyles): void;
 //#endregion
-export { CSSObject, ColorString, CssColor, CssColorLike, CssLength, CssLengthLike, CssLengthString, CssLike, CssLikeObject, CssObjectBlock, CssObjectSubBlock, CssVar, CssVarVal, DefaultVariants, HSLAColorString, HSLColorString, LengthUnit, MergeCSSVariants, MochiCSS, MochiCSSProps, MochiSelector, NumericValue, PercentValue, PixelValue, RGBAColorString, RGBColorString, RefineVariants, type StyleProps, Token, Unit, VariantProps, asColor, asLength, createToken, css, cssFromProps, styled };
+export { AllVariants, CSSObject, CompoundVariant, CssLike, CssLikeObject, CssObjectBlock, CssObjectSubBlock, CssVar, CssVarVal, DefaultVariants, GlobalCssObject, type GlobalCssStyles, type KeyframeStops, KeyframesObject, MergeCSSVariants, MochiCSS, MochiCSSProps, MochiKeyframes, MochiSelector, RefineVariants, type StyleProps, Token, VariantProps, createToken, css, cssFromProps, globalCss, keyframes, mergeMochiCss, styled };
 //# sourceMappingURL=index.d.ts.map