@mochi-css/vanilla 2.1.0 → 3.0.1

package/dist/index.mjs

@@ -1,5 +1,4 @@
 import clsx from "clsx";
-import { createElement } from "react";
 
 //#region src/token.ts
 /**
@@ -214,7 +213,6 @@ const propertyUnits = {
 	interestDelay: "ms",
 	interestDelayEnd: "ms",
 	interestDelayStart: "ms",
-	itemFlow: "px",
 	left: "px",
 	letterSpacing: "px",
 	lineHeight: "px",
@@ -354,12 +352,12 @@ const propertyUnits = {
 	textSizeAdjust: "%",
 	textUnderlineOffset: "px",
 	timelineTrigger: "px",
-	timelineTriggerExitRange: "px",
-	timelineTriggerExitRangeEnd: "px",
-	timelineTriggerExitRangeStart: "px",
-	timelineTriggerRange: "px",
-	timelineTriggerRangeEnd: "px",
-	timelineTriggerRangeStart: "px",
+	timelineTriggerActivationRange: "px",
+	timelineTriggerActivationRangeEnd: "px",
+	timelineTriggerActivationRangeStart: "px",
+	timelineTriggerActiveRange: "px",
+	timelineTriggerActiveRangeEnd: "px",
+	timelineTriggerActiveRangeStart: "px",
 	top: "px",
 	transformOrigin: "px",
 	transition: "ms",
@@ -569,6 +567,7 @@ const knownPropertyNames = new Set([
 	"columnRuleInteriorInsetEnd",
 	"columnRuleInteriorInsetStart",
 	"columnRuleStyle",
+	"columnRuleVisibilityItems",
 	"columnRuleWidth",
 	"columnSpan",
 	"columnWidth",
@@ -725,6 +724,7 @@ const knownPropertyNames = new Set([
 	"hyphenateLimitLines",
 	"hyphenateLimitZone",
 	"hyphens",
+	"imageAnimation",
 	"imageOrientation",
 	"imageRendering",
 	"imageResolution",
@@ -747,12 +747,6 @@ const knownPropertyNames = new Set([
 	"interestDelayStart",
 	"interpolateSize",
 	"isolation",
-	"itemCross",
-	"itemDirection",
-	"itemFlow",
-	"itemPack",
-	"itemTrack",
-	"itemWrap",
 	"justifyContent",
 	"justifyItems",
 	"justifySelf",
@@ -927,6 +921,7 @@ const knownPropertyNames = new Set([
 	"rowRuleInteriorInsetEnd",
 	"rowRuleInteriorInsetStart",
 	"rowRuleStyle",
+	"rowRuleVisibilityItems",
 	"rowRuleWidth",
 	"rubyAlign",
 	"rubyMerge",
@@ -942,6 +937,7 @@ const knownPropertyNames = new Set([
 	"ruleInteriorInset",
 	"ruleOverlap",
 	"ruleStyle",
+	"ruleVisibilityItems",
 	"ruleWidth",
 	"rx",
 	"ry",
@@ -1063,13 +1059,13 @@ const knownPropertyNames = new Set([
 	"textWrapStyle",
 	"timelineScope",
 	"timelineTrigger",
-	"timelineTriggerExitRange",
-	"timelineTriggerExitRangeEnd",
-	"timelineTriggerExitRangeStart",
+	"timelineTriggerActivationRange",
+	"timelineTriggerActivationRangeEnd",
+	"timelineTriggerActivationRangeStart",
+	"timelineTriggerActiveRange",
+	"timelineTriggerActiveRangeEnd",
+	"timelineTriggerActiveRangeStart",
 	"timelineTriggerName",
-	"timelineTriggerRange",
-	"timelineTriggerRangeEnd",
-	"timelineTriggerRangeStart",
 	"timelineTriggerSource",
 	"top",
 	"touchAction",
@@ -1131,6 +1127,12 @@ const knownPropertyNames = new Set([
 //#endregion
 //#region src/props.ts
 /**
+* Converts a kebab-case string to camelCase.
+*/
+function kebabToCamel(str) {
+	return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+/**
 * Converts a camelCase string to kebab-case.
 */
 function camelToKebab(str) {
@@ -1471,12 +1473,13 @@ var CssObjectBlock = class {
 	subBlocks = [];
 	/**
 	* Creates a new CSS block from style properties.
-	* Generates a unique class name based on the content hash.
+	* Generates a unique class name based on the content hash, or uses the provided class name.
 	* @param styles - The style properties to compile
+	* @param className - Optional stable class name; if omitted, a content-hash-based name is generated
 	*/
-	constructor(styles) {
+	constructor(styles, className) {
 		const blocks = CssObjectSubBlock.fromProps(styles);
-		this.className = "c" + shortHash(blocks.map((b) => b.hash).join("+"));
+		this.className = className ?? "c" + shortHash(blocks.map((b) => b.hash).join("+"));
 		this.subBlocks = blocks;
 	}
 	/**
@@ -1524,9 +1527,14 @@ var CSSObject = class {
 	/**
 	* Creates a new CSSObject from style props.
 	* Compiles main styles and all variant options into CSS blocks.
+	* @param props - Base style props plus variant definitions
+	* @param props.variants - Named variant groups, each mapping variant values to style props
+	* @param props.defaultVariants - Default value for each variant when none is provided at runtime
+	* @param props.compoundVariants - Style props applied when a specific combination of variants is active
+	* @param className - Optional stable class name for the main block
 	*/
-	constructor({ variants, defaultVariants, compoundVariants,...props }) {
-		this.mainBlock = new CssObjectBlock(props);
+	constructor({ variants, defaultVariants, compoundVariants,...props }, className) {
+		this.mainBlock = new CssObjectBlock(props, className);
 		this.variantBlocks = {};
 		this.variantDefaults = defaultVariants ?? {};
 		this.compoundVariants = [];
@@ -1568,6 +1576,10 @@ var CSSObject = class {
 
 //#endregion
 //#region src/css.ts
+const MOCHI_CSS_TYPEOF = Symbol.for("mochi-css.MochiCSS");
+function isMochiCSS(value) {
+	return typeof value === "object" && value !== null && value["$$typeof"] === MOCHI_CSS_TYPEOF;
+}
 /**
 * Runtime representation of a CSS style definition with variant support.
 * Holds generated class names and provides methods to compute the final
@@ -1582,10 +1594,6 @@ var CSSObject = class {
 * }))
 * styles.variant({ size: 'large' }) // Returns combined class names
 */
-const MOCHI_CSS_TYPEOF = Symbol.for("mochi-css.MochiCSS");
-function isMochiCSS(value) {
-	return typeof value === "object" && value !== null && value["$$typeof"] === MOCHI_CSS_TYPEOF;
-}
 var MochiCSS = class MochiCSS {
 	$$typeof = MOCHI_CSS_TYPEOF;
 	/**
@@ -1621,6 +1629,16 @@ var MochiCSS = class MochiCSS {
 		}));
 	}
 	/**
+	* Returns the CSS selector for this style (e.g. `.abc123`).
+	* Useful for targeting this component from another style.
+	*/
+	get selector() {
+		return this.classNames.map((n) => `.${n}`).join();
+	}
+	toString() {
+		return this.selector;
+	}
+	/**
 	* Creates a MochiCSS instance from a CSSObject.
 	* Extracts class names from the compiled CSS blocks.
 	* @template V - The variant definitions type
@@ -1679,51 +1697,18 @@ function mergeMochiCss(instances) {
 function css(...props) {
 	const cssToMerge = [];
 	for (const p of props) {
-		if (p == null || typeof p !== "object") continue;
+		if (p == null) continue;
+		if (typeof p === "string") {
+			cssToMerge.push(new MochiCSS([p], {}, {}));
+			continue;
+		}
+		if (typeof p !== "object") continue;
 		if (p instanceof MochiCSS) cssToMerge.push(p);
 		else cssToMerge.push(MochiCSS.from(new CSSObject(p)));
 	}
 	return mergeMochiCss(cssToMerge);
 }
 
-//#endregion
-//#region src/styled.ts
-/**
-* Creates a styled React component with CSS-in-JS support and variant props.
-* Similar to styled-components or Stitches, but with zero runtime overhead.
-*
-* @template T - The base element type or component type
-* @template V - The variant definitions tuple type
-* @param target - The HTML element tag name or React component to style
-* @param props - One or more style objects with optional variants
-* @returns A React functional component with merged props and variant support
-*
-* @example
-* const Button = styled('button', {
-*   padding: 8,
-*   borderRadius: 4,
-*   variants: {
-*     size: {
-*       small: { padding: 4 },
-*       large: { padding: 16 }
-*     },
-*     variant: {
-*       primary: { backgroundColor: 'blue' },
-*       secondary: { backgroundColor: 'gray' }
-*     }
-*   }
-* })
-*
-* // Usage: <Button size="large" variant="primary">Click me</Button>
-*/
-function styled(target, ...props) {
-	const styles = css(...props);
-	return ({ className,...p }) => createElement(target, {
-		className: clsx(styles.variant(p), className),
-		...p
-	});
-}
-
 //#endregion
 //#region src/keyframesObject.ts
 var KeyframesObject = class KeyframesObject {
@@ -1870,4 +1855,4 @@ supportsFn.or = function(...conditions) {
 const supports = supportsFn;
 
 //#endregion
-export { CSSObject, CssObjectBlock, CssObjectSubBlock, GlobalCssObject, KeyframesObject, MochiCSS, MochiKeyframes, MochiSelector, Token, container, createToken, css, cssFromProps, globalCss, isAtRuleKey, isMochiCSS, keyframes, media, mergeMochiCss, styled, supports };
+export { CSSObject, CssObjectBlock, CssObjectSubBlock, GlobalCssObject, KeyframesObject, MochiCSS, MochiKeyframes, MochiSelector, Token, camelToKebab, container, createToken, css, cssFromProps, globalCss, isAtRuleKey, isMochiCSS, kebabToCamel, keyframes, media, mergeMochiCss, numberToBase62, shortHash, supports };